- 项目中用到编辑文字,图片,最后要预览成一张图片,因为后台不提供接口,只能自己去实现如何去保存这些数据,并且能存成一张图片达成预览效果图。
- 代码如下:
* 1.先页面引入html2canvas.min.js(可以去github下载),我是直接引进链接地址的
* <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
* html代码
<a type="button" id="down_button"><button id="creat">点击复制图片</button></a>
<div class="imgBox" style="position:relative;">
<img src="body_background.jpg">
<span>我是内容</span>
</div>
* js 代码
$("#creat").click(function(){
html2canvas($(".imgBox"),{ // $(".imgBox")是你要复制生成canvas的区域,可以自己选
onrendered:function(canvas){
dataURL =canvas.toDataURL("image/png");
$("body").append(canvas); //直接在页面会把生成的这张图片的显示出来
console.log(dataURL);
/ /下载图片(可以把生成的这张图片下载下来)
$('#down_button').attr( 'href' , dataURL ) ;
$('#down_button').attr( 'download' , 'myjobdeer.png' ) ;
sessionStorage.setItem("positive",dataURL);
setTimeout(function(){
/*做一些处理*/
},3000)
},
width:678,
height:404
})
})
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。