最近做h5网页,有个功能是用户能长按页面保存为图片,在我们理解就是网页要生成图片然后再让用户长按保存,然后就发现了html2canvas这个框架了,效果挺不错了,但是有几个坑说一下(用的最新版):

html2canvas($("#pop_predict_img_container")[0], {scale:2,logging:false,useCORS:true}).then(function(canvas) {
var dataUrl = canvas.toDataURL();
$("#predict_img").attr("src",dataUrl).removeClass("hide");
});
scale:是用来调整生成图片屏幕分辨率的,其实设置成1再iphone上生成的图片清晰度没啥问题,但是再有些android手机上就很模糊,所以为了兼顾这部分手机就把scale设置成了2;

useCROS:这个参数是用来设置是否允许使用跨域的图片进行访问的,好像默认就是true,不太记得了;

logging:这个是日志打印的,实际上线当然不需要了,所以就false;

还有一点要说明下,再使用微信的头像的时候生成的图片老是会把头像丢失,其他服务器的图片都可以,尼玛就是想不通,后来就先转成base64放到img标签里面生成图片,就解决了这个问题;

此外,说个canvas将img转base64的问题,如下:

function getBase64Image(imgurl) {
var img = new Image();
img.src = imgurl;
img.setAttribute('crossOrigin', 'anonymous');
img.onload=function(){
var canvas = document.createElement("canvas");
canvas.width = 300;//这个设置不能丢,否者会成为canvas默认的300*150的大小
canvas.height = 300;//这个设置不能丢,否者会成为canvas默认的300*150的大小
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, 300, 300);
var dataURL = canvas.toDataURL("image/png");
console.log(dataURL)
$("#img").attr("src",dataURL);
html2img();
}
}
也是为了解决canvas转base64图片大小不对的问题!
---------------------
作者:show_code
来源:CSDN
原文:https://blog.csdn.net/playboyanta123/article/details/79301050
版权声明:本文为博主原创文章,转载请附上博文链接!

==========================

<template>
<div>
<img id="canvasImg" :src="Url">
<canvas id="shareCanvas" ref="ctD" style="display: none;"></canvas>
</div>
</template>
<script>
export default {
data(){
return{
Url:'',
}
},
mounted(){
this.initPage();
},
methods:{
initPage(){
//获取canvas标签
let canvas = this.$refs.ctD;
//获取 CanvasRenderingContext2D 对象,提供了一组用来在画布上绘制的图形函数
let ctx = canvas.getContext('2d');
//引入图像到 canvas
let img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = 'http://img14.360buyimg.com/uba/jfs/t1/26312/31/1131/18793/5c0f74c9E38f48e2e/ba933120c64dad12.jpg';
var base64Url = '';
img.onload = ()=>{
ctx.drawImage(img,10,10,100,100);
//可填充文字
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
base64Url = canvas.toDataURL();
this.Url = base64Url;
}
}
},
}
</script>

html2canvas用法的总结(转载)的更多相关文章

  1. 实用 .htaccess 用法大全【转载】

    转载:http://www.techug.com/htaccess-snippets 这里收集的是各种实用的 .htaccess 代码片段,你能想到的用法几乎全在这里. 免责声明: 虽然将这些代码片段 ...

  2. 多线程java的concurrent用法详解(转载)

    我们都知道,在JDK1.5之前,Java中要进行业务并发时,通常需要有程序员独立完成代码实现,当然也有一些开源的框架提供了这些功能,但是这些依然没有JDK自带的功能使用起来方便.而当针对高质量Java ...

  3. sizeof()用法汇总【转载】

    转载自:http://www.cnblogs.com/chengxin1982/archive/2009/01/13/1374575.html 参考:http://blog.csdn.net/free ...

  4. vector用法总结(转载)

    一.vector的基本概念 vector是同一种类型的对象的集合,每个对象都有一个对应的整数索引值.和string对象一样,标准库负责管理存储元素的相关内存.我们把vector称为容器,是因为它可以包 ...

  5. 数据库笔试题(经典select语句的用法)【转载】

    原文地址:数据库笔试题(经典select语句的用法)作者:lily 问题描述: 为管理岗位业务培训信息,建立3个表: S (S#,SN,SD,SA) S#,SN,SD,SA 分别代表学号.学员姓名.所 ...

  6. Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结【转载】

    详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,d ...

  7. c++ static用法总结【转载】

    static关键字是C, C++中都存在的关键字.static从字面理解,是“静态的“的 意思,与此相对应的,应该是“动态的“. static的作用主要有以下3个: 1.扩展生存期: 2.限制作用域: ...

  8. C stat函数的用法举例(转载)

    stat函数讲解表头文件:    #include <sys/stat.h>             #include <unistd.h>定义函数:    int stat( ...

  9. Py-apply用法学习【转载】

    转自:https://blog.csdn.net/anshuai_aw1/article/details/82347016 1.Apply Python中apply函数的格式为:apply(func, ...

随机推荐

  1. RabbitMQ 设置队列的过期时间

    设置队列的过期时间非常简单,在声明队列时,设置x-expires参数即可.当队列的生存周期超时后,RabbitMQ server会自动将该队列删除. 代码如下: channel.QueueDeclar ...

  2. 【转】MySQL实现Oracle里的 rank()over(ORDER BY) 功能

    Oracle rank()和dense_rank()的区别是: –rank()是跳跃排序,有两个第二名时接下来就是第四名 –dense_rank()l是连续排序,有两个第二名时仍然跟着第三名 sele ...

  3. Flatten Nested List Iterator

    Given a nested list of integers, implement an iterator to flatten it. Each element is either an inte ...

  4. java动手动脑3

    2016-10-152016-10-15一.编写一个方法,使用以上算法生成指定数目(比如1000个)的随机整数. 生成50个1到10的随机整数. value=a+(int)(Math.Random() ...

  5. MyEclipse使用教程:在Web项目中使用Web片段

    MyEclipse 在线订购年终抄底促销!火爆开抢>> MyEclipse最新版下载 本教程向用户展示了使用关联的Web项目创建Web片段项目的机制.用户还可以获得要检查的示例项目.在本教 ...

  6. Oracle数据库三种备份方案

    Oracle数据库有三种标准的备份方法,它们分别是导出/导入(EXP/IMP).热备份和冷备份.导出备件是一种逻辑备份,冷备份和热备份是物理备份. 一. 导出/导入(Export/Import) 利用 ...

  7. phpexcel 的使用

    首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.php和PHPExcel的文件夹,这个类文件和文件夹是我们需要的,把class ...

  8. mysql引擎事物支持

    事务的特性事务具体四大特性,也就是经常说的ACID 1. 原子性(Atomicity) 原子性是指事务包含的所有操作要么全部成功,要么全部失败回滚,因此事务的操作如果成功就必须要完全应用到数据库,如果 ...

  9. scrapy shell的作用

    1.可以方便我们做一些数据提取的测试代码: 2.如果想要执行scrapy命令,那么毫无疑问,肯定是要先进入到scrapy所在的环境中: 3.如果想要读取某个项目的配置信息,那么应该先进入到这个项目中. ...

  10. 在线播放Video/PDF/JPG

    Label1.Text = Play(url, , ); public string Play(string url, int width, int height) { string strTmp = ...