html2canvas踩坑记

官网：http://html2canvas.hertzen.com/

首先引入html2canvas

npm install html2canvas --save

然后再需要的页面引入

import html2canvas from 'html2canvas';

html2canvas使用稍微比较简单一点，就是在html中，找到最外层的元素，给一个class或者id即可导出，但是需要注意的是网络图片跨域问题，这时候是需要配置useCORS元素的。

代码示例：

<view id="canvas">
    <img src="/static/logi.png">
    <view style="color:red;">测试HTML</view>
</view>

//uniapp使用的语法，可迁移到vue中

getPicH5(id){
    uni.showLoading({
        title:"正在生成中..."
    })
    var copyDom = document.querySelector('#'+id);
    const width = copyDom.offsetWidth;  // 可见屏幕的宽
    const height = copyDom.offsetHeight;  // 可见屏幕的高
    // 将Canvas画布放大scale倍，然后放在小的屏幕里，解决模糊问题
    html2canvas(document.querySelector('#'+id), {
        width:width,
        heigth:height,
        scrollX:0,
        scrollY:0,
        y:0,
        useCORS: true,
        scale: 3,
        taintTest:true,
    }).then((canvas) => {
        var url = canvas.toDataURL();//图片地址
        uni.previewImage({
            urls:[url]
        })
        uni.hideLoading();
        uni.hideLoading();
    }).catch((err) => {
        console.log(err);
        uni.showToast({
            title:JSON.stringify(err),
            icon:"none"
        });
    })
}

这里会遇到一个比较坑的问题就是苹果手机出现偏移现象，这时候需要用到“y”的值来配置。

*可直接用我上面的方法来生成图片，不会出现偏移现象，亲测苹果安卓也可以。

若出现图片模糊问题，则将模糊的图片放大2倍即可

就是在图片外层包一个view，然后view是图片的正常尺寸，然后image标签的宽高是原来的2倍，再缩小，这样图片就不会模糊了。

.qrcode{
    view{
        width: 216rpx;
        height: 216rpx;
        overflow: hidden;
        margin: 0 auto;
        image{
            width: 432rpx;
            height: 432rpx;
            transform: scale(0.5);
            margin-left: -108rpx;
            margin-top:-108rpx;
        }
    }
}

html2canvas不支持border的虚线

这时候可以利用background属性来实现虚线

div{
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
    background-size: 8px 1px;
    background-repeat: repeat-x;
}

html2canvas line-through不生效问题

解决办法也很简单，将文本元素设置成relative相对定位，然后应用伪元素模拟一下就好了，less代码如下：

&:after { 
    position: absolute; 
    width: 100%; 
    height: 1px; 
    top: 50%; 
    left: 0; 
    content: ''; 
    background-color: #999;
}

html2canvas苹果手机不支持base64问题

由于图片跨域访问等问题，安卓手机可以将图片转成base64放到img标签上面即可。

但是苹果手机有可能会出现不支持base64的问题，这时候有2个方法解决：

①可以直接使用http或者https链接（若跨域则不能直接使用）；

②或者如果是uniapp的话也可以使用uni.downloadFile的方法先将下载下载，然后将路劲放到图片标签上面即可。若是vue则可以利用ajax来先读取图片流然后再放到图片上面。

这里是html2canvas网上记载的一些问题总结

https://www.cnblogs.com/padding1015/p/9225517.html

html2canvas高版本ios不能生成给图片

一、问题描述

最近在开发 html2canvas 的时候，突然发现，html2canvas在IOS13.4.1系统中调用失败。后马上去github上查看是否有同道中人遇到类似问题。

参考链接：https://github.com/niklasvh/html2canvas/issues/2229

二、解决方案

1.首先将 package.json 中的 html2canvas 版本降低为【1.0.0-rc.4】

版本降低方法

首先移除 html2canvas 【npm uninstall html2canvas】

然后安装指定版本 【npm install --save html2canvas@1.0.0-rc.4】

dependencies": {
    "html2canvas": "^1.0.0-rc.4",
    "less": "^3.11.1",
    "less-loader": "^4.1.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
},

2.如果上述无法解决你的问题 再进行第2步

先点下方的参考链接下载修复过的html2canvas.js文件，在按下面的方法改代码

// 修改后代码 主要将 html2canvas 修改为 (window.html2canvas || html2canvas)

(window.html2canvas || html2canvas)(this.$refs.htmlCanvas, {
        backgroundColor: null
    }).then((canvas) => {
        let dataURL = canvas.toDataURL("image/png");
        this.shareImgUrl = dataURL;
        console.log(this.dataURL)
    });
}

参考链接：https://github.com/FEA-Dven/html2Canvas