将HTML5画布转换为jpeg时，Electron-Page会刷新 [英] Electron - Page is refreshed when converting HTML5 canvas to jpeg

问题描述

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

I have a desktop application using Electron platform and Javascript where I am converting an HTML5 canvas to JPEG using:

< a id =downloaddownload =Path.jpg>下载JPG< / a>

然后，

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

这会刷新我的整个申请。

This refreshes my whole application.

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

Since the user is drawing on the canvas, I do not want to refresh the page, only allowing the image to be downloaded and then the user may continue to draw on the canvas.

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

Any pointers on what I am doing wrong and how this behavior can be changed?

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

The image below is a screenshot in which you can see the canvas behind with a blue square drawn. As soon as I click on the save button, the canvas and the whole page will be refreshed.

推荐答案

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

I guess you are trying to take a snapshot of your three.js scene. You can use FileSaver.js to download the image to your local machine.

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

here is the link to FileSaver.js https://github.com/eligrey/FileSaver.js/

包括你的代码中的FileSaver.js

include the FileSaver.js in your code

你所要做的就是，

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

1) convert the canvas to dataurl(will give you base64 encoded image)

2）将base64数据转换为blob

2) convert the base64 data to blob

3）下载blob到本地机器

3) download the blob to local machine

将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 );
    } );
}

这篇关于将HTML5画布转换为jpeg时，Electron-Page会刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！