Question

怎么将js生成的图片自动保存到本地

form.submit(function(event){
event.preventDefault();

var img_name = $(this).serializeArray()[0].value,
img_src = img.find('img').attr('src');

if(img_name.length == 0){
$('#error_container').html('<p class="bg-danger" >Please, enter the pattern for names of images!</p>').fadeIn().delay(3000).fadeOut();
return false;
}

if(img_src == undefined || img_src == 'http://www.forkosh.com/mimetex.cgi?...'){
$('#error_container').html('<p class="bg-danger" >Image not found</p>').fadeIn().delay(3000).fadeOut();
return false;
}

var reg1 = /(?!_)\d+$/, // index from numbers (123)
reg2 = /\w+_/, // string pattern for images name (lection_)
// if this is first saved image then index = 1
index = reg1.exec(img_name) !== null ? reg1.exec(img_name)[0] : 1;

img_name = reg2.exec(img_name) !== null ? reg2.exec(img_name)[0] : img_name + '_';

var filename = img_name + '.png';

var canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
image = new Image();

image.onload = function () {
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);

canvas.toBlob(function(blob) {
saveAs(
blob
, (filename.value || filename.placeholder) + ".png"
);
}, "image/png");
};

index ++;
form.find('input').val(img_name + index);
image.src = img_src;

Answer 1

js没有操作本地文件的权限，可以借助php等后端语言才行的，将图片提交之后，返回个下载地址，window.open就自动下载了。

追问

其实我想知道上面代码中var filename = img_name + '.png';是什么意思，是新建了没

追答

没有，在内存里面创建了一个img对象，加载完成后画在canvas上。canvas.toBlob可以将canvas转成blob图像，但也不能保存到本地的文件系统。