当前位置：首页 > news >正文

html2canvas用法的总结(转载)

news 来源：原创 2024/5/4 11:22:37

最近做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.οnlοad=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>