js 的canvas使用 -- canvas轉圖片、圖片轉canvas、base64圖片下載到本地、復制剪貼板、生成二維碼的canvas

 

將canvas 轉圖片 以及 將 圖片轉成 canvas的方法

1. 圖片轉到畫布上

// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);

    return canvas;
}
// (image, 0, 0); 其中0,0表示canvas的坐標點

 

2. 畫布轉成圖片

// Converts canvas to an image
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}
// "image/png"表示canvas轉成的圖片類型，默認是png，可以改成"image/jpeg"

 

3. base64圖片下載到本地（android另說）

/**
 * 下載Base64到本地
 1. trident內核都不可以（IE，獵豹）
 2. chrome, opera 等使用blink內核 可以（但是chrome好像還是webkit內核）
 3. firefox（Gecko） 可以
 4. 三星可以（多余后綴）
 5. 小米自帶的手機瀏覽器可以（但filename亂碼）
 6. qq， uc（PC都可以）
 * */
function downloadFile(content, fileName) { //下載base64圖片
    const base64ToBlob = function(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for(let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
            type: contentType
        });
    };
    let aLink = document.createElement('a');
    let blob = base64ToBlob(content); //new Blob([content]);
    let evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true); //initEvent 不加后兩個參數在FF下會報錯  事件類型，是否冒泡，是否阻止瀏覽器的默認行為
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    // aLink.click();
    aLink.dispatchEvent(new MouseEvent("click", {bubbles: true, cancelable: true, view: window}));  //
}

 

4. 復制剪貼板

/**
 * 復制進剪貼板
 * @param str
 */
export function copyText(message) {
    // copy(str){
    //     let save = function (e){
    //         e.clipboardData.setData('text/plain',str);//clipboardData對象
    //         e.preventDefault();//阻止默認行為
    //     };
    //     document.addEventListener('copy',save);
    //     return document.execCommand("copy");//使文檔處於可編輯狀態，否則無效
    // }

    let input = document.createElement("textarea");
    input.value = message;
    document.body.appendChild(input);
    input.select();
    input.setSelectionRange(0, input.value.length);
    document.execCommand('Copy');
    document.body.removeChild(input);
    console.log("復制成功")     //"復制成功"
}

 

5. 生成二維碼的canvas（使用jquery 和 jquery.qrcode.js ）

// 生成二維碼canvas - 使用jquery 和 jquery.qrcode.js 
function() {  
     var imgBuffer = $("<div></div>");
        imgBuffer.qrcode({
            render: 'canvas',
            width: 0.24 * deviceWidth * ratio,
            height: 0.24 * deviceWidth * ratio,
            text: url,
            foreground: "#000000",
            correctLevel: 3,
            minVersion: 1,
            //src: require("../image/logo-qrcode.png"),
        });
        // var ctx = imgBuffer.children("canvas")[0].getContext("2d");
        // this.qrcodeImageObj = imgBuffer.children("canvas")[0];
        // this.qrcodeImageSrc = imgBuffer.children("canvas")[0].toDataURL();
        // this.qrCodeData = ctx.getImageData(0,0,imgBuffer.children("canvas")[0].width, imgBuffer.children("canvas")[0].height);
}
// 123

 

方法二： 使用 npm i qrcode

// 使用 npm i qrcode 的二維碼生成功能   
function getQrcodeCanvas = { 
    const _this = this;
        await QRCode.toCanvas(url, {
            width: 0.24 * deviceWidth * ratio,
            height: 0.24 * deviceWidth * ratio,
            text: url,
            foreground: "#000000",
            correctLevel: 3,
            minVersion: 1,
        }, function (err, canvas) {
            var ctx = canvas.getContext("2d");
            _this.qrcodeImageObj = canvas;
            _this.qrcodeImageSrc = canvas.toDataURL();
            _this.qrCodeData = ctx.getImageData(0,0, canvas.width, canvas.height);
        });
}

 

最后： 實例

/**
 * 使用
 */
const data = {
    width: document.body.clientWidth,
    height: document.body.clientHeight
}
new DrawInvitation(data, (src, canvas, imageObj, imageSrc) => {
    // success callback
    // 顯示 canvas
    // 顯示 image
    // 保存 image
}, () => {
    // fail callback
})




/**
 * 畫圖
 */
class DrawCanvas {
    constructor(data, successCallback, errorCallback) {
        this.url = "https://123.com";

        var deviceWidth = data.width ? data.width : window.screen.width;
        var deviceHeight = data.height ? data.height : window.screen.width * 16/9;
        var dpr = window.devicePixelRatio || 1;
        var canvas = $("<canvas id='qrcode-canvas'></canvas>");
        canvas.attr("width",deviceWidth);
        canvas.attr("height",deviceHeight);
        canvas.css("position", "absolute");
        canvas.css("left", "0");
        canvas.css("top", "0");
        canvas.css("z-index", "1");
        // canvas.css("display", "none");
        canvas.css("background-color", "#000000");
        var ctx = canvas[0].getContext("2d");
        var bspr = ctx.webkitBackingStorePixelRatio ||
            ctx.mozBackingStorePixelRatio ||
            ctx.msBackingStorePixelRatio ||
            ctx.oBackingStorePixelRatio ||
            ctx.BackingStorePixelRatio || 1;
        var ratio = dpr / bspr;
        canvas.css("width", canvas.attr("width"));
        canvas.css("height", canvas.attr("height"));
        canvas.attr("width", canvas.attr("width") * ratio);
        canvas.attr("height", canvas.attr("height") * ratio);

        this.qrCodeData = null;
        this.deviceWidth = deviceWidth;
        this.deviceHeight = deviceHeight;
        this.ctx = ctx;
        this.ratio = ratio;
        this.canvas = canvas;
        this.successCallback = successCallback;
        this.errorCallback = errorCallback;
    }

    /**
     * 生成二維碼
     */
    async qrCodeCreater(){
        // 二維碼的生成路徑
        let {deviceWidth, ratio} = this;
        var imgBuffer = $("<div></div>");
        let url = this.url;
        // imgBuffer.qrcode({
        //     render: 'canvas',
        //     width: 0.24 * deviceWidth * ratio,
        //     height: 0.24 * deviceWidth * ratio,
        //     text: url,
        //     foreground: "#000000",
        //     correctLevel: 3,
        //     minVersion: 1,
        //     //src: require("../image/logo-qrcode.png"),
        // });
        // var ctx = imgBuffer.children("canvas")[0].getContext("2d");
        // this.qrcodeImageObj = imgBuffer.children("canvas")[0];
        // this.qrcodeImageSrc = imgBuffer.children("canvas")[0].toDataURL();
        // this.qrCodeData = ctx.getImageData(0,0,imgBuffer.children("canvas")[0].width, imgBuffer.children("canvas")[0].height);

        const _this = this;
        await QRCode.toCanvas(url, {
            width: 0.24 * deviceWidth * ratio,
            height: 0.24 * deviceWidth * ratio,
            text: url,
            foreground: "#000000",
            correctLevel: 3,
            minVersion: 1,
        }, function (err, canvas) {
            var ctx = canvas.getContext("2d");
            _this.qrcodeImageObj = canvas;
            _this.qrcodeImageSrc = canvas.toDataURL();
            _this.qrCodeData = ctx.getImageData(0,0, canvas.width, canvas.height);
        });
    };

    /**
     * 生成圖片
     */
    draw() {
        // 生成二維碼的圖片
        this.qrCodeCreater();
        const _this = this;
        // var imgBuffer = $("<img></img>");
        // imgBuffer.on("load", function() {})  //jquery的監聽從1.8版本開始，不可使用load直接進行
        var imgBuffer = new Image();
        imgBuffer.crossOrigin = "Anonymous";
        imgBuffer.src = "圖片1.png";
        imgBuffer.onload = function(){
            var imgBuffer_2 = new Image();
            imgBuffer_2.crossOrigin = "Anonymous";
            imgBuffer_2.src = "圖片2.png";
            imgBuffer_2.onload = function(){
                var imgBuffer_3 = new Image();
                imgBuffer_3.crossOrigin = "Anonymous";
                imgBuffer_3.src = "圖片3.png";
                imgBuffer_3.onload = function(){
                    _this.drawCanvas(imgBuffer, imgBuffer_2, imgBuffer_3);
                };
                imgBuffer_3.onerror = function () {
                    showErrorMessage(i18n.home.generate_card_fail, _this.errorCallback);    //'生成邀請函失敗！'
                };
            };
            imgBuffer_2.onerror = function () {
                showErrorMessage(i18n.home.generate_card_fail, _this.errorCallback);    //'生成邀請函失敗！'
            }
        };
        imgBuffer.onerror = function () {
            showErrorMessage(i18n.home.generate_card_fail, _this.errorCallback);    //'生成邀請函失敗！'
        }
    }

    /**
     * onload 圖片后合成canvas
     * @param imgBuffer
     * @param imgBuffer_2
     */
    drawCanvas(imgBuffer, imgBuffer_2, imgBuffer_3) {
        let {qrCodeData, ctx, canvas, deviceWidth, deviceHeight, ratio, successCallback} = this;
        ctx.clearRect(0,0,canvas.attr("width"), canvas.attr("height"));
        //背景顏色
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(0, 0, canvas.attr("width"), canvas.attr("height"));
        ctx.textAlign="center";
        // ctx.drawImage(imgBuffer, 0, 0, canvas.attr("width"), canvas.attr("height"));

        let canvasWidth= canvas.attr("width"), canvasHeight = canvas.attr("height");
        // 頂部橙色圓弧背景
        ctx.beginPath();
        // ctx.arc(300, -540, 750, 0, 2*Math.PI);
        ctx.arc(canvasWidth/6*5, -canvasWidth/9*13.5, canvasWidth/12*25, 0, 2*Math.PI);
        ctx.stroke();
        ctx.fillStyle="#03bcd5";
        ctx.fill();
        // logo圖片
        ctx.drawImage(imgBuffer, canvasWidth * 0.2, canvasWidth * 0.14, canvasWidth*0.6, canvasWidth*0.6*0.31466);//0.31466470154753131908621960206338
        // 底部圖片
        ctx.drawImage(imgBuffer_2, canvasWidth * 0.382/2, canvasHeight-canvasWidth * 0.618, canvasWidth * 0.618, canvasWidth * 0.618);
        // 二維碼背景
        ctx.beginPath();
        ctx.rect(canvasWidth*0.38-canvasWidth*0.01, canvasHeight*0.59-canvasWidth*0.008, qrCodeData.width+canvasWidth*0.02, qrCodeData.height+canvasWidth*0.02);
        ctx.stroke();
        ctx.fillStyle="#ffffff";
        ctx.fill();
        // 二維碼
        ctx.putImageData(qrCodeData, canvas.attr("width") * 0.38, canvas.attr("height") * 0.59);

        ctx.drawImage(imgBuffer_3,
            canvas.attr("width") * 0.38 + this.qrcodeImageObj.width/2 - this.qrcodeImageObj.width/4.7/2,
            canvas.attr("height") * 0.59 + this.qrcodeImageObj.height/2 - this.qrcodeImageObj.height/4.7/2,
            this.qrcodeImageObj.width/4.7,
            this.qrcodeImageObj.height/4.7);

        //文字顏色
        ctx.fillStyle = "#000000";
        var in_text3 = "123456789";
        var in_text4 = "123456789";
        var in_text5 = "123456789";
        var in_text6 = "123456789";

        // 1
        ctx.font= "900 " + deviceWidth * ratio / (getCurrentInputLength(in_text3) * 1 > 12 ? getCurrentInputLength(in_text3) * 1 : 12) +"px 微軟雅黑";
        ctx.fillText(in_text3, 0.5 * deviceWidth * ratio , 0.42 * deviceHeight * ratio);
        // 2
        this.fillTextAndAutoChangeLine(ctx, deviceWidth, ratio, deviceHeight, in_text4);
        // 3
        ctx.font= "bold " + deviceWidth * ratio / 22 + "px exo, JiaLiDaYuan, 微軟雅黑";
        ctx.fillText(in_text5, 0.5 * deviceWidth * ratio , 0.815 * deviceHeight * ratio);
        ctx.fillText(in_text6, 0.5 * deviceWidth * ratio, 0.855 * deviceHeight * ratio);

        // $("#imgBox").children("img").attr("src", canvas[0].toDataURL());
        successCallback(canvas[0].toDataURL(), canvas, this.qrcodeImageObj, this.qrcodeImageSrc);
    }


    /** 繪制文字時自動換行 */
    fillTextAndAutoChangeLine(ctx, deviceWidth, ratio, deviceHeight, text) {
        ctx.font= deviceWidth * ratio / 22 +"px 微軟雅黑";
        // 一個字符的寬度
        const oneCharWidth = ctx.measureText("M").width;
        // canvas的寬度, 這里特意少個字符
        const canvasWidth = deviceWidth * ratio - 3 * oneCharWidth;
        const len = text.length;
        // 初始Y的距離
        let initY = 0.45 * deviceHeight * ratio;
        const lineHeight = 0.03 * deviceHeight * ratio;
        // 預存字符串
        let preWriteText = "";
        let preWriteTextWidth = 0;
        // 整個單詞, 遇到不完整的就換行
        let totalWord = "";
        for (let i = 0; i < len; i ++) {
            const char = text.charAt(i);
            // 判斷是否遇到空格
            if (char === " ") {
                totalWord = "";
            } else {
                totalWord += char;
            }
            // 計算字體的寬度
            const charWidth = ctx.measureText(char).width;
            preWriteTextWidth += charWidth;
            // 如果大於cavas寬度並且不是最后一個字符並且是一個完整的單次, 則將這行寫下來, 並換行
            if (i != len - 1 && preWriteTextWidth >= canvasWidth) {
                // 通過下一個是不是空格判斷是不是一個完整的單次
                if (char != " "&& preWriteText.indexOf(" ") !== -1) {
                    // 不是完整的單次, 則退回到單次開頭
                    const wordFirstCharPos = preWriteText.length - totalWord.length + 1;
                    preWriteText = preWriteText.substring(0, wordFirstCharPos);
                    initY += lineHeight;
                    ctx.fillText(preWriteText, 0.5 * deviceWidth * ratio , initY);
                    i -= totalWord.length;
                    // 單次的第一個字母
                    const wordFirstChar = text.charAt(wordFirstCharPos);
                    preWriteText = "";
                    preWriteTextWidth = 0;
                }
                // 下一個不是空格, 並且這一行中沒有空格, 則把這行寫下來 ||
                else {
                    initY += lineHeight;
                    // 當前單次切掉, 確保不爆框
                    preWriteText = preWriteText.substring(0, preWriteText.length);
                    ctx.fillText(preWriteText, 0.5 * deviceWidth * ratio , initY);
                    // 換行
                    preWriteText = char;
                    preWriteTextWidth = charWidth;
                }
            } else {
                preWriteText += char;
            }
            // 直到最后一個字
            if (i == len - 1) {
                initY += lineHeight;
                ctx.fillText(preWriteText, 0.5 * deviceWidth * ratio , initY);
            }
        }
    }
}