将Canvas元素下载到图像

时间:2011-11-14 18:55:54

标签: javascript canvas download

保存画布对象有哪些不同的方法?

在我的研究中,我发现了两种方法:

var data = canvas.toDataURL();
var prev = window.location.href;
window.location.href = data.replace("image/png", "image/octet-stream");
window.location.href = prev;

另一种方法是拍摄快照。

还有其他方法吗?

是否可以自定义下载文件名?

8 个答案:

答案 0 :(得分:26)

保存的一种方法是导出为图像......您已经找到了这个解决方案,这是我认为最好的解决方案;)

    var canvas = document.getElementById("mycanvas");
    var img    = canvas.toDataURL("image/png");
    document.write('<img src="'+img+'"/>');

您可以使用不同的图像类型。更改此函数中的mimetype:

    canvas.toDataURL("image/jpeg");

另一种将画布数据保存到PDF中的方法是使用wkhtmltopdf Library

干杯。弗兰克

frankneff.ch / @frankneff

答案 1 :(得分:16)

此解决方案更好:

&#13;
&#13;
{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "noEmitHelpers": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "outDir": "./prebuild",
    "lib": [
      "es2015",
      "dom"
    ],
    "types": [
      "jasmine",
      "node"
    ]
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true,
    "transpileOnly": true
  },
  "angularCompilerOptions": {
    "genDir": "./ngfactory",
    "entryModule": "src/app/app.module#AppModule"
  }
}
&#13;
function download() {
var download = document.getElementById("download");
var image = document.getElementById("myCanvas").toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
download.setAttribute("href", image);
//download.setAttribute("download","archive.png");
}
&#13;
&#13;
&#13;

答案 2 :(得分:10)

不需要您创建按钮的解决方案。

var download = function(){
  var link = document.createElement('a');
  link.download = 'filename.png';
  link.href = document.getElementById('canvas').toDataURL()
  link.click();
}

如果您有其他下载触发器或无法轻易引用的触发器,则非常有用。

答案 3 :(得分:7)

var c = document.getElementById("popup");
var link = document.getElementById('cropImageLink');
link.setAttribute('download', 'MintyPaper.png');
link.setAttribute('href', c.toDataURL("image/png").replace("image/png", "image/octet-stream"));
link.click();

我希望这些代码能够正常运行。但首先在canvas标签中创建其标签为'cropImageLink'的Anchor标签。比检查后。但它不能在IE浏览器中工作

答案 4 :(得分:3)

您可以使用reimg库轻松完成此操作。

将画布转换为img: ReImg.fromCanvas(document.getElementById('yourCanvas')).toPng()

为用户下载此图像可以这样做: ReImg.fromCanvas(document.getElementById('canvas')).downloadPng()

关于为文件提供自定义名称,如果您查看库的代码(非常简短且易于理解),您会发现可以更改名称。 /> 以下是指向特定行的链接:https://github.com/gillyb/reimg/blob/master/reimg.js#L56

答案 5 :(得分:0)

尝试这样的事情

var downloadCanvasAsImage = function(){

    let canvasImage = document.getElementById('canvas').toDataURL('image/png');

    // this can be used to download any image from webpage to local disk
    let xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function () {
        let a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhr.response);
        a.download = 'image_name.jpg';
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        a.remove()
      };
      xhr.open('GET', canvasImage); // This is to download the canvas Image
      xhr.send();
}

答案 6 :(得分:0)

this相关,并感谢@kaiido

我刚刚修改了回调方法,它起作用了,上面提到的回调方法对我不起作用

var callback = function(blob) {
var a = document.createElement('a');
var saveAs = $('input[name="group1"]:checked').val();


var link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'Image.' + saveAs;
document.body.appendChild(link);
link.click();

};
 function dataURIToBlob(dataURI, callback) {
var binStr = atob(dataURI.split(',')[1]),
len = binStr.length,
arr = new Uint8Array(len);

 for (var i = 0; i < len; i++) {
  arr[i] = binStr.charCodeAt(i);
 }

   callback(new Blob([arr]));
 }

答案 7 :(得分:0)

使用此:

$("input[type='submit']").click(function (ent) {
    ent.preventDefault();

    var Azienda_cliente = $("select#ddlCLienti option:selected").text();

    var Azienda_sotto_clienti = $("select#ddlSottoClienti option:selected").text();

    //make ajax request to your controller action
    //...

})