html2canvas

• （一）官網下載安裝
• （二）基礎用法
• （三）生成海報問題
• • canvas高分屏下的模糊問題
  • html2canvas圖片模糊問題
  • canvas圖片getImageData,toDataURL跨域問題
  • • • 1) 首先，圖片服務器需要配置Access-Control-Allow-Origin
      • 2) canvas圖片getImageData cross-origin跨域問題
  • 圖片加載導致海報生成不了
  • ios的兼容性問題
  • ios 生成圖片時顯示時不顯的，大圖幾乎不顯示

（一）官網下載安裝

下載：https://html2canvas.hertzen.com/
vue 安裝：npm install html2canvas

（二）基礎用法

以vue為例子

<div @click="handlePoster()" class="btn">生成海報</div> <div id="weeklyPoster" ref="weeklyPoster" class="poster"><h1>poster content</h1><img class="poster__logo" src="./assets/img/share-logo.png" alt="" crossOrigin="anonymous"> </div> <div v-if="sharePoster.show" class="poster__save"><img class="poster__logo" :src="sharePoster.url" alt=""> </div> <script> import html2canvas from 'html2canvas'; data () {return {sharePoster: { // 海報內容show: false,url: '',height: 0,width: 0},} } methods: {handlePoster() {this.getWeeklyWxCode(()=>{ // 向獲取二維碼接口發起請求if(!this.sharePoster.url) { // 第一次生成海報// 提示海報生成中...this.$nextTick(() => {setTimeout(()=>{html2canvas(document.querySelector('#myPoster'), {scrollX: 0,scrollY: 0,allowTaint: true,useCORS: true,backgroundColor: null // 解決生成的圖片有白邊}).then((canvas) => {// 隱藏提示海報生成中let dataURL = canvas.toDataURL('image/jpeg');this.sharePoster.url = dataURL;this.sharePoster.show = true;this.sharePoster.height = canvas.height / 100; // 單位remthis.sharePoster.width = canvas.width / 100;});},600)});} else {this.sharePoster.show = true;}})}, } </script>

（三）生成海報問題

canvas高分屏下的模糊問題

介紹：
開發手機 canvas 應用，在高分屏下，尤其是手持設備，如搭載高分屏的手機平板等，其顯示效果會變得模糊，帶給用戶的體驗很不好。

問題分析：

解決方案：

首先我們計算 webkitBackingStorePixelRatio / devicePixelRatio 的比值，這里為了方便稱之為倍率 ratio

把 canvas 的 width 和 height 設置為 ratio 倍，這樣瀏覽器便會按照 ratio * ratio 倍像素去渲染該 canvas

我們在用 CSS 把 canvas 的大小強制再調節為原始大小

使用 canvas 畫布 context 的 scale 方法把渲染區域擴大 ratio 倍以填充屏幕 （ 后面會有解釋 ）

// 獲取 ratio 比例 function getPixelRatio(context) {// 獲取 canvas 的 backingStorePixelRatio 值var backingStore = context.backingStorePixelRatio ||context.webkitBackingStorePixelRatio ||context.mozBackingStorePixelRatio ||context.msBackingStorePixelRatio ||context.oBackingStorePixelRatio ||context.backingStorePixelRatio || 1;// 若 devicePixelRatio 不存在，默認為 1return (window.devicePixelRatio || 1) / backingStore; } // 調整 canvas function adjustCanvas(canvas, context) {var ratio = getPixelRatio(context);// 獲取 canvas 的原始大小var oldWidth = canvas.width;var oldHeight = canvas.height;// 按照比例放大 canvascanvas.width = oldWidth * ratio;canvas.height = oldHeight * ratio;// 用 css 將 canvas 再調整成原來大小canvas.style.width = oldWidth + 'px';canvas.style.height = oldHeight + 'px';// 按照比率把 context 再縮放回來context.scale(ratio, ratio); }// 調用 // 此處默認你的 canvas 已經是你要的實際尺寸 var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); adjustCanvas(canvas, ctx);

轉載鏈接

html2canvas圖片模糊問題

問題： html2canvas 渲染背景圖片 background-image 會不清晰。
解決方法：使用 Img 標簽。

canvas圖片getImageData,toDataURL跨域問題

1) 首先，圖片服務器需要配置Access-Control-Allow-Origin

一般團隊都會有一個專門域名放置靜態資源，例如騰訊是gtimg.com，百度是bdimg.com；或者很多團隊使用的是騰訊云或者阿里云的服務。
而主頁面所在域名往往不一樣，當需要需要對canvas圖片進行getImageData()或toDataURL()操作的時候，跨域問題就出來了，而且跨域問題還不止一層。
eg：PHP添加響應頭信息

// *通配符表示允許任意域名 header("Access-Control-Allow-Origin: *");// 指定域名 header("Access-Control-Allow-Origin: www.zhangxinxu.com");

此時，Chrome瀏覽器就不會有Access-Control-Allow-Origin相關的錯誤信息了，但是，還會有其他的跨域錯誤信息。

2) canvas圖片getImageData cross-origin跨域問題

對于跨域的圖片，只要能夠在網頁中正常顯示出來，就可以使用canvas的drawImage() API繪制出來。但是如果你想更進一步，通過getImageData()方法獲取圖片的完整的像素信息，則多半會出錯。

var canvas = document.createElement('canvas'); var context = canvas.getContext('2d');var img = new Image(); img.onload = function () {context.drawImage(this, 0, 0);context.getImageData(0, 0, this.width, this.height); }; img.src = 'https://avatars3.githubusercontent.com/u/496048?s=120&v=4';';

解決方案：可以試試crossOrigin屬性

1）HTML5中，有些元素提供了支持CORS(Cross-Origin Resource Sharing)（跨域資源共享）的屬性，這些元素包括<img>，<video>，<script>等。

<img src="img/png" alt="" crossorigin="anonymous">

增加一個img.crossOrigin = ''即可，雖然JS代碼這里設置的是空字符串，實際上起作用的屬性值是anonymous。

var canvas = document.createElement('canvas'); var context = canvas.getContext('2d');var img = new Image(); img.crossOrigin = ''; img.onload = function () {context.drawImage(this, 0, 0);context.getImageData(0, 0, this.width, this.height); }; img.src = 'https://avatars3.githubusercontent.com/u/496048?s=120&v=4';';

或者這樣寫：

drawCanvas() {if (!this.isLoadImg) {Promise.all([new Promise((resolve, reject) => {this.saveImgObj = new Image();this.saveImgObj.onload = () => {resolve();};this.saveImgObj.src = this.saveImg;this.saveImgObj.setAttribute("crossOrigin","Anonymous");}),new Promise((resolve, reject) => {this.codeImgObj = new Image();this.codeImgObj.onload = () => {resolve();};this.codeImgObj.src = this.codeImg;this.codeImgObj.setAttribute("crossOrigin","Anonymous");})]).then(() => {this.isLoadImg = true;this.drawHandler();this.posterImg = this.$refs.canvasPad.toDataURL();});} else {this.drawHandler();this.posterImg = this.$refs.canvasPad.toDataURL();} }, drawHandler () {let canvas= this.$refs.canvasPad;let ctx= cav.getContext("2d");adjustCanvas(canvas, ctx); }

注意：
crossOrigin兼容性：IE11+(IE Edge)，Safari，Chrome，Firefox瀏覽器均支持，IE9和IE10會報SecurityError安全錯誤

圖片加載導致海報生成不了

用原生的方法等待所有圖片加載完成后，在執行繪制
解決方法：

function imgLoad(imgArr, ck) { let imgs = imgArr Promise.all(imgs.map((src, index) => { return new Promise((resolve, reject) => { let img = new Image() img.onload = () => { resolve(img)}img.onerror = () => { reject(src, index) } img.crossOrigin = 'anonymous' img.src = src }) })).then(arr => { ck(arr) }).catch(e => { console.log(e) }) },

ios的兼容性問題

html2canvas: "1.0.0-rc. 5"版本在運行在蘋果13.4 系統 iphone7 iphonex iPhone11下都生成不了的時候，安卓沒問題，微信內置瀏覽器不行(真機)；
請看看html2canvas的版本，只有1.0.0-rc.4這個版本是可行的，如果你指定下載這個版本在package.json中看到是 ^ 1.0.0-rc.4，則不一定就是1.0.0-rc.4版本，它是指1.0.0-rc.4以上的版本，把^去掉再重新安裝依賴就可以了

解決辦法：
卸載npm uninstall html2canvas
重新npm i html2canvas@1.0.0-rc.4;
package.json中看到是 ^ 1.0.0-rc.4，^去掉再重新安裝依賴

ios 生成圖片時顯示時不顯的，大圖幾乎不顯示

猜測是圖片渲染的原因，為了確保能夠生成圖片
html2canvas庫的工作原理：需要我們先提供一段DOM節點，然后它再讀取并解析這一段DOM節點生成canvas對象。如果DOM節點中已經使用了<img>標簽的話，它也會解析這個<img>標簽的src屬性，然后重新創建一個Image對象，給它添加crossOrigin="anonymous"屬性后嘗試以跨域的方式重新讀取圖片數據。需要注意的是，一般CDN上的圖片都是帶有緩存響應頭并且會在瀏覽器端緩存的，而且緩存的不僅僅是圖片數據，還有HTTP響應頭。所以問題的根本原因我們就找到了，當html2canvas嘗試以跨域的方式去讀取圖片數據時，它讀取到的是瀏覽器的緩存數據，而且因為我們沒有給DOM節點中的<img>標簽添加crossOrigin="anonymous"屬性，所以緩存數據是不帶Access-Control-Allow-Origin響應頭的，進而導致html2canvas庫讀取到的圖片數據污染了生成的canvas對象，最終致使canvas導出數據報錯
解決方法：
給DOM節點中的每一個<img>標簽都加上crossOrigin="anonymous"屬性就可以了

https://segmentfault.com/a/1190000017086056
https://blog.csdn.net/qq_41227106/article/details/106764421

總結

以上是生活随笔為你收集整理的html2canvas生成海报的各种问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。