Electron - 将 HTML5 画布转换为 jpeg 时刷新页面

Question

我有一个使用 Electron 平台 和 Javascript 的桌面应用程序，我在其中使用以下方法将 HTML5 画布转换为 JPEG：

<a id="download" download="Path.jpg">Download JPG</a>

那么，

function download(){ 
    dt = 'data:text/plain,foo'; 
    this.href=dt; }

这刷新了我的整个应用程序。

由于用户在画布上绘图，我不想刷新页面，只允许下载图像，然后用户可以继续在画布上绘图。

关于我做错了什么以及如何改变这种行为的任何指针？

下图是一个屏幕截图，您可以在其中看到画布后面绘制了一个蓝色方块。当我点击保存按钮时，画布和整个页面都会被刷新。

Answer 1

我猜您正在尝试拍摄您的 three.js 场景的快照。您可以使用 FileSaver.js 将图像下载到本地计算机。

这里是 FileSaver.js https://github.com/eligrey/FileSaver.js/的链接

在您的代码中包含 FileSaver.js

你所要做的就是，

1) 将画布转换为 dataurl（将为您提供 base64 编码图像）

2) 将base64数据转成blob

3) 将 blob 下载到本地计算机

将base64转换为blob的函数

var base64ToBlob : function( b64Data, contentType, sliceSize ) {
    return new Promise( function( resolve, reject ){
        contentType = contentType || '';
        sliceSize = sliceSize || 512;
        try{
            //converting each byte in the b64Data to a single character using the atob() method.
            var byteCharacters = atob(b64Data);
            var byteArrays = [];
            // a set of 'sliceSize' number of characters are processed at a time. 
            for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                //slice holds a set of 'sliceSize' number of characters from the byteCharacters array.
                var slice = byteCharacters.slice(offset, offset + sliceSize);   
                //converting each character in 'slice' to the ASCII code.
                var byteNumbers = new Array(slice.length);
                for (var i = 0; i < slice.length; i++) {
                    byteNumbers[i] = slice.charCodeAt(i);
                }
                //creating a typed array structure using the ASCII codes of the characters.
                var byteArray = new Uint8Array(byteNumbers);
                byteArrays.push(byteArray);
            }
            //now byteArrays holds the whole bytes converted to the ASCII character codes
            //convert the typed array to the blob
            var blob = new Blob( byteArrays, { type : contentType } );
            resolve( blob );
        }
        catch( error ){
            reject( error );
        }
    } );
}

像这样改变你的下载功能，

function download() {
    var dt = canvas.toDataURL('image/jpeg');
    //this.href = dt; //this line is causing the page redirection
    base64ToBlob( dt, 'image/png', 512 ).then( function( file ){ 
        FileSaver.saveAs(file, "image.png");//or use just saveAs( file, "image.png" )
    }, function( error ){
        console.log( error );
    } );
}

Answer 2

var anchorEvent = document.getElementById("download");
anchorEvent.addEventListener("click", function () {
    var dt = canvas.toDataURL('image/jpeg');
    this.href = dt;
    event.preventDefault();
});

event.preventDefault();是您的页面不会刷新的原因。它会阻止您使用按钮的默认刷新功能。