html转化成图片,相当于生成海报,长按保存到手机

html

<div class="tab-con" id="erweima"><div class="erweima-box"><div class="erweima"><div class="top"><span>扫码支付</span><span>排队免单</span></div><div class="img-box"><img src="images/erweima.png" /></div><p>凡参与免单活动的商品/服务<br/>不支持退款,请理性购买!</p></div><div class="erweima-bottom"><span><i class="iconfont icon-wxpay"></i>微信支付</span><div class="right"><img src="images/erweima.png"/><p>关注排呗<br/>排队免单公众号</p></div></div></div>
</div>

js
点击这里,下载html2canvas.min.js

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js" ></script>
$(function() {var canvas2 = document.createElement("canvas");let _canvas = document.querySelector('.tab-con');//需要替换成图片的html区域console.log(_canvas);//获取宽高var w = parseFloat(window.getComputedStyle(_canvas).width);var h = parseFloat(window.getComputedStyle(_canvas).height);console.log(w,h);//将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了canvas2.width = w*2;canvas2.height = h*2;//可以按照自己的需求,对context的参数修改,translate指的是偏移量var context = canvas2.getContext("2d");context.translate(0,-140);context.scale(2,2);html2canvas(_canvas,{canvas:canvas2}).then(function(canvas) {var imgUrl = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url$("#erweima").html('<img class="imgDiv_img" src="'+imgUrl+'" style="width:'+w+'px;height:'+h+'px;"/>');})});

css:样式根据需求自己搞定吧

效果图 还算标清吧 哈哈哈哈哈
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/9606.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

淘宝图片服务器的学习

一、淘宝网的困境 对于淘宝网这样的大型电子商务网站&#xff0c;对于图片服务的要求特别的高。而且对于卖家来说&#xff0c;图片远胜于文字描述&#xff0c;因此卖家也格外看重图片的显示质量、访问速度等问题。根据淘宝网的流量分析&#xff0c;整个淘宝网流量中&#xff0c…

用ChatGPT/midjourney生成创意营销图片素材,产品图、虚拟主播、终端店铺图

营销素材对应的关键词库&#xff08;3个&#xff09;&#xff1a; 元素、风格、AI绘画工具midjourney 提问模板&#xff1a; 第一步&#xff0c;先预设场景&#xff0c;询问应该包含的关键词范围 假设你是一位世界一流水平的设计师&#xff0c;你想要使用AI绘画工具midjourn…

仿淘宝的详情页图片切换

鼠标放在小图片上&#xff0c;上面的大图会切换到相应的图片 html代码&#xff1a; css代码&#xff1a; js代码&#xff1a; 完整代码&#xff1a; <!DOCTYPE html><html lang"en"> <head> <meta charset"utf-8"> …

html css js肝撸淘宝官网代码(淘宝web端官网页面+部分js功能实现)

大家好&#xff0c;我是梅巴哥er。本篇是我写的一个练习&#xff0c;淘宝首页。用html, css, js写的。交互功能只写了一部分&#xff0c;仅供学习参考。如想下载源码&#xff0c;请移步https://github.com/guozi007a/taobao-homepage.git我传到github上了。在这个页面点Code选项…

ChatGPT对于普通人有什么机会和影响?

ChatGPT爆火“出圈”&#xff0c;短短三个月里&#xff0c;势如破竹。 月活已经达到1亿&#xff0c;什么概念呢&#xff1f;Tiktok在海外达到1亿月活用了将近9个月时间&#xff0c;Instagram用了大约2年半&#xff0c;就连比尔盖茨都表示“Web3没那么重要&#xff0c;元宇宙没…

ChatGPT爆火,真有那么神?

近来&#xff0c;人工智能聊天机器人ChatGPT实火。上线仅仅2个月&#xff0c;ChatGPT的活跃用户就突破一亿&#xff0c;曾创下无数增长奇迹的TikTok都望尘莫及。连比尔盖茨都没忍住承认&#xff1a;ChatGPT出现的意义&#xff0c;不亚于互联网和个人电脑的诞生。 ChatGPT真有那…

震惊!火爆全网的ChatGPT背后使用的数据库居然是……

摘要&#xff1a;ChatGPT承认了自己背后使用的数据库是Cassandra。 OpenAI最近发布的AI驱动的智能聊天机器人ChatGPT在互联网上掀起了一阵风暴&#xff0c;热衷于尝试这一新AI成果的网民不在少数。ChatGPT针对网友广泛的问题提供了非常有针对性的回答&#xff0c;其不可思议的能…

赛狐ERP率先引入ChatGPT 一键生成优质Listing

最近被火遍全球的ChatGPT刷屏了&#xff0c;作为以人工智能技术驱动的自然语言处理工具&#xff0c;它正在用一种新的方式改变着我们的工作和生活。为了更好地赋能卖家&#xff0c;赛狐ERP研发团队快速响应市场需求&#xff0c;率先引入了ChatGPT技术&#xff0c;基于亚马逊畅销…

谷歌推出PaLM-E,能超越ChatGPT么?

‍数据智能产业创新服务媒体 ——聚焦数智 改变商业 ChatGPT的横空出世&#xff0c;打的老牌科技巨头谷歌措手不及。在OpenAI微软的双重压力下&#xff0c;自赋“红码”的谷歌亮出“大招”。 近日&#xff0c;谷歌和柏林工业大学的团队重磅推出史上最大的视觉语言模型——PaLM…

“文心一言”和“ChatGPT”两者有何差距?

如果说现阶段火遍全球应用是什么&#xff0c;绝大多数人会脱口而出——ChatGPT。当然最近我们国内版也出来了&#xff0c;就是百度的“文心一言”&#xff0c;文心一言和ChatGPT都是当下以语言模型为核心的人工智能平台&#xff0c;这两者对比之下有何不一样呢&#xff1f;下面…

ChatGPT+Midjourney

一键部署属于你的ChatGPTMidjourney网页&#xff0c;目前已实现&#xff1a; 1.imagin 想象 2.upscale 放大 3.variation 变幻 4.describe 识图 5.blend 混图 6.垫图 开源地址&#xff1a;https://github.com/Licoy/ChatGPT-Midjourney 欢迎大家访问&#xff1a;http://…

ChatGPT 的议论文究竟写的怎么样?111 位高中教师告诉你答案

夕小瑶科技说 原创 作者 | 小戏、Python 在 OpenAI GPT-4 发布时发布的《GPT-4 Technical Report》中&#xff0c;其中很吸引人眼球的一部分是 GPT-4 应用于教育领域的出色表现&#xff0c;通过让 GPT-4 去完成美国的 AP 课程及考试&#xff0c;来评估 GPT-4 在多个学科中的性…

刚刚!ChatGPT演示即将上线王炸功能!不仅推出官方版AutoGPT,还能联网,支持处理Excel,发推购物一条龙!...

转载自量子位 OpenAI官方AutoGPT&#xff0c;要来了&#xff01; 就在AutoGPT项目破10万Star之际&#xff0c;OpenAI也放出重磅炸弹&#xff0c;由联合创始人格雷格布洛克曼&#xff08;Greg Brockman&#xff09;亲自现场演示了ChatGPT即将上线的新功能。 比如要一张这样有氛围…

【历史上的今天】7 月 10 日:iOS App Store 问世;台积电创始人出生;第一台被“越狱”的 iPhone

整理 | 王启隆 透过「历史上的今天」&#xff0c;从过去看未来&#xff0c;从现在亦可以改变未来。 今天是 2023 年 7 月 10 日&#xff0c;在 1856 年的今天&#xff0c;交流电的发明者尼古拉特斯拉&#xff08;Nikola Tesla&#xff09;出生。特斯拉被认为是电力商业化的重要…

沙龙|AI iPhone时刻来临!如何获得登上类ChatGPT的船票?

出品&#xff5c;网易科技数字星球 作者&#xff5c;袁宁 编辑&#xff5c;丁广胜 兴奋麻了&#xff01;还没从ChatGPT带来的震撼中回过神来&#xff0c;过去几天GPT-4、Microsoft 365 Copilot、Midjourney V5、Google PaLM API、文心一言相继引爆&#xff0c;互联网巨头纷纷抢…

来自 ChatGPT 的威胁?谷歌、百度纷纷入局,苹果被迫“开卷”

整理 | 朱珂欣 出品 | CSDN程序人生&#xff08;ID&#xff1a;coder_life&#xff09; 近年来&#xff0c;AIGC 应用可谓是多处开花&#xff0c;成为了科技巨头的“必争之地”。 随着 ChatGPT 在互联网上“高热不下”&#xff0c;除了拍案叫绝的聊天能力以及惊人的准确率备…

苹果 App Store 出现山寨ChatGPT;Anthropic宣布获得4.5亿美元C轮融资

&#x1f680; 中国互联网协会提醒公众警惕“AI换脸”的新骗局 中国互联网协会提醒公众警惕“AI换脸”的新骗局&#xff0c;不法分子利用AI技术通过声音合成、伪造面部表情等实施诈骗。 公众应加强个人信息安全与防范措施&#xff0c;如加强个人信息保护、防止信息泄露、安装…

论文阅读 A Survey of Large Language Models 3

文章目录 能力评估基础任务语言生成知识利用率复杂推理 高级能力评估人类对戏与外部环境的交互作用扩展能力范围 公共基准测试和经验分析评价基准对LLM的能力进行全面分析 结论和未来方向 能力评估 为了检验LLM的有效性和优越性&#xff0c;大量的任务和基准被用来进行实证评估…

【NLP】大模型综述来了!一文带你理清全球AI巨头的大模型进化史

夕小瑶科技说 原创 作者 | 小戏&#xff0c;Python 如果自己是一个大模型的小白&#xff0c;第一眼看到 GPT、PaLm、LLaMA 这些单词的怪异组合会作何感想&#xff1f;假如再往深里入门&#xff0c;又看到 BERT、BART、RoBERTa、ELMo 这些奇奇怪怪的词一个接一个蹦出来&#xf…

LLMs模型速览(GPTs、LaMDA、GLM/ChatGLM、PaLM/Flan-PaLM、BLOOM、LLaMA、Alpaca)

文章目录 一、 GPT系列1.1 GPTs&#xff08;OpenAI&#xff0c;2018——2020&#xff09;1.2 InstructGPT&#xff08;2022-3&#xff09;1.2.1 算法1.2.2 损失函数 1.3 ChatGPT&#xff08;2022.11.30&#xff09;1.4 ChatGPT plugin1.5 GPT-4&#xff08;2023.3.14&#xff0…