貼一段代碼先

 methods: {
           // polyfill 提供了這個方法用來獲取設(shè)備的 pixel ratio 
          getPixelRatio: function (context) { 
            var backingStore = context.backingStorePixelRatio ||
                context.webkitBackingStorePixelRatio ||
                context.mozBackingStorePixelRatio ||
                context.msBackingStorePixelRatio ||
                context.oBackingStorePixelRatio ||
                context.backingStorePixelRatio || 1;
            return (window.devicePixelRatio || 1) / backingStore;
          },
          _drawBg: function() {
            var c = this.$refs.composeWapper; //vue取dom
            var cxt = c.getContext("2d"); //獲取畫布
            var radio = this.getPixelRatio(cxt); //獲取像素比
            var img = new Image(); 
           //Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
            img.crossOrigin = "anonymous"; //不同源圖片配置跨域  
            var thisWh = window.innerWidth;
            var thishg = window.innerWidth* 1.55;
            c.width = thisWh * radio; //先設(shè)置canvas w产喉，h為radio倍
            c.height = thishg * radio;
            cxt.scale(radio, radio);  //畫布需要進行radio倍的縮放防止生成base64圖片失真
            img.src = "${staticCtx}/wap/img/my_invitation/qr-code-bg.png"; //該img 和下面的img不在一個域下
            img.onload = function() {  //img load后才能進行下操作
              cxt.drawImage(img, 0, 0, thisWh, thishg);  //將img寫入canvas
              var winWh = window.innerWidth;
              c.style.width = winWh + 'px';  //通過style還原到正常的h,w
              c.style.height = winWh* 1.55 + 'px';
              var codeImg = this.$refs.codeWapper.$el.children[1]; //獲取動態(tài)生成的二維碼dom
              cxt.drawImage(codeImg, winWh* 0.255, winWh* 0.267, winWh* 0.485, winWh* 0.485);
              this.composeImg  = c.toDataURL("image/png");  //canvas裝換為base64碼
            }.bind(this)
          }
        },
        created: function () {},
        mounted: function () {
          this._drawBg();
        },

多張圖片通過canvas合成跨域問題

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

需要給img設(shè)置跨域頭 img.crossOrigin = "anonymous"; //不同源圖片配置跨域

canvas導(dǎo)出img 出現(xiàn)圖片失真的情況

參照上面的代碼