javascript 如何将 html2canvas 图像保存到我的项目图像文件夹中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31652698/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to save html2canvas image to my project images folder?
提问by Meroshini
I am not sure how to specify the path for the file to be save (like ../images/screenshot.png)I tried saving the image like
我不确定如何指定要保存的文件的路径（如 ../images/screenshot.png）我尝试保存图像
html2canvas($my-div, {
useCORS: true,
allowTaint: true,
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
location.href = img;
}
});
This gets downloaded to my system downloads.How do I save this to the folder inside the project (want to specify the path I want to save the file)?
这被下载到我的系统下载。我如何将它保存到项目内的文件夹中（想要指定我想要保存文件的路径）？
回答by Justinas
You have to use some library like Canvas2Imageto download image. User will specify image path by it self (you don't know where to save it, because there may be no such directory as 'C:\Users{SomeUsername}\Downloads'
你必须使用像Canvas2Image这样的库来下载图像。用户自己指定图片路径（你不知道保存在哪里，因为可能没有'C:\Users{SomeUsername}\Downloads'这样的目录）
html2canvas($my-div, {
onrendered: function(canvas) {
return Canvas2Image.saveAsPNG(canvas);
}
});
回答by Meroshini
Finally solved this problem. The plugin that helped me to save canvas to image in my local storage is canvas2image plugin from devgeeks. Directly pass your canvas as parameter to the save function of plugin which will save that canvas as image to your local storage.
终于解决了这个问题。帮助我将画布保存到本地存储中的图像的插件是devgeeks 的 canvas2image 插件。直接将您的画布作为参数传递给插件的保存功能，该插件会将画布作为图像保存到您的本地存储中。
html2canvas($my-div, {
height: myDivHeight,
width: 350,
useCORS: true,
allowTaint: true,
proxy: "your url",
onrendered: function (canvas) {
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log(msg) //path where image is saved
},
function(err){
console.log(err);
},
canvas // pass canvas as third parameter
);
}
});
I used html2canvaslibrary to captured the current screen and used canvas2Image plugin to save it to my local storage. Cheers!!!
我使用html2canvas库来捕获当前屏幕并使用 canvas2Image 插件将其保存到我的本地存储中。干杯！！！
回答by pubudu sachintha
This is the way of screenshot upload
这是截图上传的方式
Step 01:
步骤 01：
include html2canvas CDN inside your html file
在 html 文件中包含 html2canvas CDN
Step 02:
步骤 02：
<form id="imgupload" enctype="multipart/form-data">
<input type="hidden" name="imagename" id="imghidden">
</form>
<canvas id=img>
<img src="....">
</canvas>
<button id="imgupload"></button>
Step 03:
步骤 03：
$("#imgupload").click(function(){
html2canvase($("#img"),{
onrendered:function(canvas)
{
var canvasinfo=canvas;
$(#imghidden).val(canvasinfo.toDataURL('image/png'));
var formid=$("#imgupload")[0];
var data=new FormData(formid);
$.ajax({
type:"post",
url:"dataSave.php",
data:data,
contentType: false,
cache: false,
processData:false,
success:function (data) {
console.log(data);
},error:function(error)
{
console.log(error);
}
});
}
});
});
Step 04:
步骤 04：
Put this code inside the dataSave.php file
将此代码放在 dataSave.php 文件中
<?php
$filteredData=substr($POST['imghidden'],strpos($_POST['imghidden'],',')+1);
$DecodeData=base64_decode($filteredData);
//Now you can upload image inside the folder
$imgPath='img'.time().'.png';
file_put_contents($imgPath,$DecodeData);
?>
