使用html2canvas插件可以無法渲染圖片的情況
在使用html2canvas的時候。如果元素中還包含網絡圖片。那么有很大的幾率渲染不出來。即時把html2canvas的允許跨域打開也無濟於事。這次就從根源解決這個問題。
而且即時渲染出來了。其實同一張圖片已經請求了2次（初始渲染一次，html2canvas渲染也請求了一次）。
問題的根本：在插件中，圖片請求的時候跨域了（甚至同域的圖片都難請求）
圖片多也會導致圖片請求失敗
把圖片放在OSS（雲存儲）上，oss允許跨域，圖片依然是無法生成
解決：在請求對應oss圖片的后面，加一個參數，為時間戳，目的就是不使用oss的緩存，就可以解決跨域問題了，如：
https://test.oss.com/image?t=129094392478
解決思路：
1、在JS中使用 Image 對象。該對象可以設置跨域請求。
2、把圖片請求回來后直接渲染到canvas上，注意這里是直接渲染到canvas。並不是通過html2canvas
3、把渲染圖片的canvas轉成base64的編碼格式。
4、把轉換好的圖片格式重新放到html的元素中
5、使用html2canvas轉換對應的html元素
前提條件：
服務器的圖片，必須是已經設置了允許跨域的
如果服務器端的圖片不允許跨域訪問，那么只是前端是很難進行跨域圖片處理，以下說的使用 img 標簽特性也將無效
ps:html2canvas操作更像 發送一次請求完成拼圖操作，請求圖片地址時(當做api)，是用過瀏覽器域名地址訪問，需要設置跨域請求：
No 'Access-Control-Allow-Origin' header is present on the requested resource
OSS 完成，接下來看下代碼：
<body>
<!-- 需要轉換的html結構 -->
<div id="test-box">
<!-- 這里不需要把圖片路徑放入src了。直接通過data存儲就行 -->
<img id="img1" src=""
data-imgUrl="http://fastmarket.oss-cn-shenzhen.aliyuncs.com/oss/static/other/1/images/baseMap_index.jpg">
</div>
<script src="../../js/lib/jquery-2.1.4.min.js"></script>
<script src="../../js/lib/html2canvas.js"></script>
<script>
$(function () {
//var url = $("#img1").attr('data-imgUrl');
var url = "http://img.test.看截圖.com/img/2020/5/23/aad618896c3aad9405f975d0f1b9ef3a.JPG"
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image();
img.crossOrigin = 'Anonymous'; // 重點！設置image對象可跨域請求
img.src = url + "?timeStamp=" + new Date().getTime(); //解決緩存引起訪問失敗需要添加時間戳。。。。。問題的關鍵點
img.onload = function () {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL('image/jpeg');
console.log(dataURL)
$("#img1").attr("src", dataURL)
// // 賦值完成，生成圖片
// html2canvas($('#test-box'), {
// useCORS: true,
// allowTaint: true
// }).then(function (canvas) {
// console.log(canvas) // 生成的canvas對象
// var resImgUrl = canvas.toDataURL(); // 最后拿到了對應節點生成的圖片（base64格式）
// alert(resImgUrl)
// })
};
})
</script>
</body>
// 這個控制台 ，有個紅框 代表任何域都可以訪問次圖片；出現這個說明網絡圖片，，在html2canvas中能使用！！!
根據上邊代碼：遠程圖片地址，是可以達到截圖渲染的，，，，圖片跨域設置！！！， canvas-->base64-->dom
需要注意的就是調用的循序。示例代碼中是進入頁面后直接開始這些步驟了。而且必須先請求圖片在使用html2canvas插件
html2canvas 圖片合成模糊問題解決
要是通過把canvas容器擴大，再將和成的圖片進行縮放
getCanvasImg(obj){ var doc = window.document; var width = obj.content.offsetWidth; var height = obj.content.offsetHeight; var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); var scale = 2; canvas.width = width * scale; canvas.height = height * scale; canvas.getContext("2d").scale(scale, scale); var opts = { scale: scale, canvas: canvas, logging: true, width: width, height: height }; html2canvas(obj.content, opts).then(function (canvas) { var dataUrl = canvas.toDataURL(); var newImg = doc.createElement("img"); newImg.src = dataUrl; newImg.id = "qcImg"; //newImg.style.width = "100%"; newImg.style.width = canvas.width/2 + 'px'; newImg.style.height = canvas.height/2 + 'px'; newImg.style.borderRadius = '10px'; newImg.style.webkitBorderRadius = '10px'; obj.box.removeChild(obj.content); obj.box.appendChild(newImg); obj.cb&&obj.cb(); }); }
總結：合成區域如果有涉及到圖片的，不要用背景處理，統統用img標簽來引入，然后img一定要用個外框（div或者其他標簽）包裹住，這樣就可以很好的解決圖片模糊問題了。
可以參考：
https://blog.csdn.net/Jioho_chen/article/details/83239288
https://blog.csdn.net/yemuxia_sinian/article/details/80745102