從html5畫布保存圖像
[英]Save image from html5 canvas
問題描述
$("#fileinput").change(function (e) {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = URL.createObjectURL(e.target.files[0]);
img.onload = function () {
ctx.drawImage(img, 0, 0, img.width, img.height,
0, 0, canvas.width, canvas.height);}
});
到目前為止，它運行良好。 現在，我嘗試通過Ajax將圖像作為表單數據發送到服務器。
var fd = new FormData();
var canvasData = canvas.toDataURL("image/png");
//I tried
var canvasData = canvas.getImageData();
//Gives Uncaught TypeError: canvas.getImageData is not a function(…)
fd.append("InsidePhoto", canvasData);
但是它什么也沒發送。 Ajax代碼已經過測試，可以正常工作。 我想我無法從畫布上獲得圖像。 任何想法？
2 個解決方案
解決方案1
0 2016-11-14 14:29:27
這是一個可行的示例。 很難說出問題所在與您省略的代碼有關。 例如，在第二個片段中，我們無法確定canvas是否有效。
php代碼：（postExample.php）
<?php
//postExample.php
printf("<img src='%s'/>", $_POST['InsidePhoto']);
?>
HTML代碼
<!doctype html>
<html>
<head>
<script>
"use strict";
function newEl(tag){return document.createElement(tag)}
function byId(id){return document.getElementById(id)}
function ajaxPostFormData(url, formData, onSuccess, onError)
{
var ajax = new XMLHttpRequest();
ajax.onload = function(){onSuccess(this);}
ajax.onerror = function(){onError(this);}
ajax.open("POST",url,true);
ajax.send(formData);
}
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt)
{
byId('imgInput').addEventListener('change', onFileInputChanged, false);
}
function onFileInputChanged(evt)
{
var can = byId('preview'), ctx = can.getContext('2d');
var img = new Image();
img.onload = function()
{
can.width = img.width;
can.height = img.height;
ctx.drawImage(img,0,0);
var fd = new FormData();
var canvasData = can.toDataURL("image/png");
fd.append("InsidePhoto", canvasData);
ajaxPostFormData('postExample.php', fd, onSuccess, onError)
}
var dataSrc = URL.createObjectURL(this.files[0]);
img.src = dataSrc;
function onSuccess(ajax)
{
console.log(ajax.response);
var div = newEl('div');
div.innerHTML = ajax.response;
document.body.appendChild( div.childNodes[0] );
}
function onError(ajax)
{
console.log(ajax.response);
}
}
</script>
<style>
</style>
</head>
<body>
<input type='file' id='imgInput'/>
<canvas id='preview'></canvas>
</body>
</html>
解決方案2
0 2016-11-14 14:33:34
您需要使用CanvasRenderingContext2D的getImageData(x, y, width, height)函數來獲取畫布的圖像數據，而不是畫布元素的圖像數據。
前兩個值是起始位置，將其設置為0即可從左上邊緣開始。
后兩個值是區域的寬度和高度，因此請將它們分別設置為canvas.width和canvas.height。
HTML5 CANVAS：如何從服務器保存並重新打開圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.