注：之前也写过一篇html2canvas，但是感觉大家不会意思到这个有什么用，所以就举个例子

一个比较有趣的玩意，玩ps的同学都玩过图片合成，当然对图片的操作不只是ps的特权，使用html也是可以合成的，而且，这个也是我们经常看到的一个技术点，

（比如将你的头像合成到mj的旁边）

插件：html2canvas，jquery

html2canvas：一个神奇的插件，好吧。其实就是将div转化为canvas，然后在用canvas将其转化为图片。。。。

代码如下：

<html><head><meta charset="UTF-8"><title></title></head><div class="div1" style="width:150px;height: 20px;;">也许这是优美的文字</div><div class="div2" style="background-repeat:no-repeat;width:200px;height:200px;background-size:100%;background-image: url(img/background.png);"><img class="img3" style="width:150px;margin-left:25px;height:20px;margin-top:50px;" /></div><div class="div3" style="width: 200;height: 200px;;"></div><button class="getpic1">获取图片1</button><button class="getpic2">获取图片2</button><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/html2canvas.js"></script><script>//生成第一张视频$(".getpic1").bind("click", function() {getpic1()});//将第一张图片放置在div上$(".getpic2").bind("click", function() {getpic2()});function getpic1() {var str = $('.div1');//console.log(str);  html2canvas([str.get(0)], {onrendered: function(canvas) {var image = canvas.toDataURL("image/png");$('.img3').attr("src", image);}});}function getpic2() {var str = $('.div2');//console.log(str);  html2canvas([str.get(0)], {onrendered: function(canvas) {var image = canvas.toDataURL("image/png");var pHtml = "<img src=" + image + " />";$('.div3').html(pHtml);}});}</script><body></body></html>

不多说，都是简单的代码。接着：

上流程图：

1.此时，图片是什么都没有的，现在我们点击第一张按钮

2.看到。现在文字出现在了图片上，接着，我们点击第三个按钮

3.现在，新图片生成，就可以保存在本地了

js文件已经上传，如果找不到的，可以百度。。。

HTML2CANVAS 合成图片相关推荐

vue-drag-resize + html2canvas合成图片并下载
vue-drag-resize + html2canvas 合成图片并下载可以实现图片拖动,缩放,最后合成一个图片并且下载的功能一.下载 vue-drag-resize 和 html2canvas ...
vue使用html2canvas合成图片
vue.jpg 先看效果 image.png ---start--- 1.先安装依赖 [传送门] (http://html2canvas.hertzen.com/) npm install --sav ...
php 远程图片合拼,PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】...
本文实例讲述了PHP实现将几张照片拼接到一起的合成图片功能.共享给大家供大家参考,详细如下: /** * 作品合成程序 * 针对单面,封面不做特殊处理 */ $src_path = $argv[1]; ...
java盒图_java合成图片
package com.pbids.sanqin.util; import javax.imageio.ImageIO; import java.awt.*; import java.awt.imag ...
PHP 合成图片并在图片上加文字
/*** Info: PHP把一张图片作为背景和另一张图片合成新图片*/public function createImage(){$path_1 = 'XXXXX/attachment/images ...
php 合成图片，合成圆形图片
合成图片方法 <?php class Share {/** 生成分享图片* */function cre_share_study_img(){$auth = json_decode(base64 ...
php 合成图片、合成圆形图片
合成图片 <?php class Share {/** 生成分享图片* */function cre_share_study_img(){$auth = json_decode(base64_d ...
php生成推广二维码海报、合成图片demo
php生成推广二维码海报.合成图片 1.海报背景图.背景图一般存服务器,程序本地读取: 2.推广二维码.可以是二维码图片链接,也可以是字符串图像流.如果自己生成二维码,详见phpqrcode官网,地址 ...
php|thinkphp程序合成图片+文字+图片大小调整+正方形转换圆角+去除白色边框
/** * 图片合成工具类 * 说明: * 拿过来不一定可以使用,需要自行调整每一步骤的参数, * 处理步骤分开,调整大小--改变圆角--合成图片--添加文字 * 比较清晰,也可以封装到一个 ...
谷歌研究利用AI合成图片，使静态图片动起来
内容来源:ATYUN AI平台谷歌的研究人员开发了一个基于深度学习的系统,可以将立体相机,VR相机和双镜头相机(如iPhone 7或X)拍摄的静态图像转换为短视频. "给出两个图像与已知的 ...

HTML2CANVAS 合成图片

插件：html2canvas，jquery

HTML2CANVAS 合成图片相关推荐

最新文章

热门文章