htmlcanvas上傳圖片
❶ html5 canvas在線生成圖片後怎麼樣保存到資料庫(伺服器端)而不是本地
canvas畫布保存為圖片：
functionconvertCanvasToImage(canvas){
varimage=newImage();
image.src=canvas.toDataURL("image/png");
returnimage;canvas參數為你的canvas對象，返回一個圖片對象，你可以將這個image放到網頁結構中，如果要保存圖像，可以將canvas.toDataURL("image/png")返回的base64格式的圖片數據放到input（type=hidden）中，用戶點擊上傳按鈕（或設置表單自動提交），將base64格式的數據上傳
形如：
data:image/png;base64,/oMwlEs8yMgvJVcjyMbSYaERogCC0/kYEBAG/wdxC2W2tUAAAAAElFTkSuQmCC
伺服器端接收到字元串（以上字元串可以直接在瀏覽器中打開，IE低版本就算了，能用canvas的瀏覽器都可以）後根據data:image/png得知應該保存的文件類型擴展名（png），然後將base64,後面的base64編碼字元串解碼(後端語言實現，如php用base64_decode()函數)，將解碼後的二進制數據以二進制的形式保存到伺服器上（圖片形式）
如果存資料庫，可以直接存base64編碼，讀取時候解碼也行，圖片建議以文件形式存儲，資料庫不適合存大文件
❷ html5 canvas載入多張圖片
重復執行以下代碼不就可以添加多張圖片了？，添加一張跟添加多張方法還不是都一樣。當然你可以封裝以下，循環調用，省的代碼重復太多。
我本地試過，多張也可以。
let cvb=new Image();
cvb.src="img/img1.png";
cvb.onload = function(){
game.drawImage(cvb, 0, 0, 100, 100);
}
❸ canvas無法上傳圖片
記錄用canvas添加圖片時，遇到的一個小問題
按正常方式使用canvas圖片
//創建一個畫布
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
//畫布上添加img元素
var img=new Image();
//設置圖片起始位置，縮放比
ctx.drawImage(img,0,0,300,150);
img.src="images/background.png"
無顯示，用$nextTick設置延時載入，無用。。。
需要確認img元素添加進去才可以繪畫
❹ 小程序canvasToTempFilePath生成圖片後，怎麼上傳到自己的伺服器，不知道什麼原因請求發送不出去
1、首先在電腦中打開文件上傳工具，然後在軟體頁面中，點擊菜單欄 【新建】圖標。
❺ 如何使用HTML5實現利用攝像頭拍照上傳功能
HTML5技術支持WebApp在手機上拍照，顯示在頁面上並上傳到伺服器。這是手機微博應用中常見的功能，當然你也可以在其它類型應用中適當使用此技術。
1、 視頻流
HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶可以直接用 getUserMedia（請注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video 標簽，並將從攝像頭獲得的視頻作為這個標簽的輸入來源。
<video id=」video」 autoplay=」"></video>
<script>
var video_element=document.getElementById(『video』);
if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow
navigator.getUserMedia(『video』,success,error); //success是回調函數,當然你也可以直接在此寫一個匿名函數
}
function success(stream){
video_element.src=stream;
}
</script>
此時，video 標簽內將顯示動態的攝像視頻流。下面需要進行拍照了。
2、 拍照
拍照是採用HTML5的Canvas功能，實時捕獲Video標簽的內容，因為Video元素可以作為Canvas圖像的輸入，所以這一點很好實現。主要代碼如下：
var canvas=document.createElement(『canvas』); //動態創建畫布對象
var ctx=canvas.getContext(』2d』);
var cw=vw,ch=vh;
ctx.fillStyle=」#ffffff」;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //將video對象內指定的區域捕捉繪制到畫布上指定的區域，可進行不等大不等位的繪制。
document.body.append(canvas);
3、 圖片獲取
從Canvas獲取圖片數據的核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像，類似於「data:image/png;base64,xxxxx」的格式。
var imgData=canvas.toDataURL(「image/png」);
這樣，imgData變數就存儲了一長串的字元數據內容，表示的就是一個PNG圖像的base64編碼。因為真正的圖像數據是base64編碼逗號之後的部分，所以要讓實際伺服器接收的圖像數據應該是這部分，我們可以用兩種辦法來獲取。
第一種：是在前端截取22位以後的字元串作為圖像數據，例如：
var data=imgData.substr(22);
如果要在上傳前獲取圖片的大小，可以使用：
var length=atob(data).length; //atob 可解碼用base-64解碼的字串
第二種：是在後端獲取傳輸的數據後用後台語言截取22位以後的字元串（也就是在前台略過上面這步直接上傳）。例如PHP里：
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);
4、 圖片上傳
在前端可以使用Ajax將上面獲得的圖片數據上傳到後台腳本。例如使用jQuery時可以用：
$.post(『upload.php』,{『data』:data});
在後台我們用PHP腳本接收數據並存儲為圖片。
function convert_data($data){
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,』w');
fwrite($fp,$image);
fclose($fp);
}
以上的解決方案不僅能用於Web App拍照上傳，也可以通過Canvas的編輯功能函數提供圖片編輯，例如裁剪、上色、塗鴉、圈點等功能，然後把用戶編輯完的圖片上傳保存到伺服器上。
在還在不斷補充修正的HTML5的驅動下，Web App與Native App之間的距離將越來越小。在可預見的不遠的未來，越來越多老的和新的開發項目必將會遷移到WEB應用上來。
相關規范：
（為便於閱讀，對原文進行了不失原意的適當修改，包括代碼中一些錯誤的重復，並作了注釋）
HTML5技術支持WebApp在手機上拍照，顯示在頁面上並上傳到伺服器。這是手機微博應用中常見的功能，當然你也可以在其它類型應用中適當使用此技術。
1、 視頻流
HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶可以直接用 getUserMedia（請注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video 標簽，並將從攝像頭獲得的視頻作為這個標簽的輸入來源。
<video id=」video」 autoplay=」"></video>
<script>
var video_element=document.getElementById(『video』);
if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow
navigator.getUserMedia(『video』,success,error); //success是回調函數,當然你也可以直接在此寫一個匿名函數
}
function success(stream){
video_element.src=stream;
}
</script>
此時，video 標簽內將顯示動態的攝像視頻流。下面需要進行拍照了。
2、 拍照
拍照是採用HTML5的Canvas功能，實時捕獲Video標簽的內容，因為Video元素可以作為Canvas圖像的輸入，所以這一點很好實現。主要代碼如下：
var canvas=document.createElement(『canvas』); //動態創建畫布對象
var ctx=canvas.getContext(』2d』);
var cw=vw,ch=vh;
ctx.fillStyle=」#ffffff」;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //將video對象內指定的區域捕捉繪制到畫布上指定的區域，可進行不等大不等位的繪制。
document.body.append(canvas);
3、 圖片獲取
從Canvas獲取圖片數據的核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像，類似於「data:image/png;base64,xxxxx」的格式。
var imgData=canvas.toDataURL(「image/png」);
這樣，imgData變數就存儲了一長串的字元數據內容，表示的就是一個PNG圖像的base64編碼。因為真正的圖像數據是base64編碼逗號之後的部分，所以要讓實際伺服器接收的圖像數據應該是這部分，我們可以用兩種辦法來獲取。
第一種：是在前端截取22位以後的字元串作為圖像數據，例如：
var data=imgData.substr(22);
如果要在上傳前獲取圖片的大小，可以使用：
var length=atob(data).length; //atob 可解碼用base-64解碼的字串
第二種：是在後端獲取傳輸的數據後用後台語言截取22位以後的字元串（也就是在前台略過上面這步直接上傳）。例如PHP里：
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);
4、 圖片上傳
在前端可以使用Ajax將上面獲得的圖片數據上傳到後台腳本。例如使用jQuery時可以用：
$.post(『upload.php』,{『data』:data});
在後台我們用PHP腳本接收數據並存儲為圖片。
function convert_data($data){
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,』w');
fwrite($fp,$image);
fclose($fp);
}
以上的解決方案不僅能用於Web App拍照上傳，也可以通過Canvas的編輯功能函數提供圖片編輯，例如裁剪、上色、塗鴉、圈點等功能，然後把用戶編輯完的圖片上傳保存到伺服器上。
在還在不斷補充修正的HTML5的驅動下，Web App與Native App之間的距離將越來越小。在可預見的不遠的未來，越來越多老的和新的開發項目必將會遷移到WEB應用上來。
❻ HTML5中canvas圖片載入的問題
getImageData方法不支持file協議，確定本地啟了服務。另外最好把控制台的錯誤代碼貼出來，這樣方便大家找bug。
❼ Canvas生成並拼接圖片上傳至後端
不使用 png 是因為 背景透明，導出效果不太好，canvas 轉換成 jpeg 之前會移除alpha通道，所以透明區域被填充成了黑色
可以多次調用自己 以達到橫向或豎向拼接圖片的目的
可參考
❽ 如何將HTML中的div的內容變成一張圖片存儲起來
方法：搜索 html2canvas ，可以吧頁面dom元素轉化成canvas
canvas可以作為圖片上傳。canvas相關的可以網路查查。
❾ html5 canvas怎麼載入圖像
在canvas中顯示圖片非常簡單。可以通過修正層為圖片添加印章、拉伸圖片或者修改圖片等，並且圖片通常會成為canvas上的焦點。用HTML5 Canvas API內置的幾個簡單命令可以輕松地為canvas添加圖片內容。
不過，圖片增加了canvas操作的復雜度：必須等到圖片完全載入後才能對其進行操作。瀏覽器通常會在頁面腳本執行的同時非同步載入圖片。如果試圖在圖片未完全載入之前就將其呈現到canvas上，那麼canvas將不會顯示任何圖片。因此，開發人員要特別注意，在呈現之前，應確保圖片已經載入完畢。
為保證在呈現之前圖片已完全載入，我們提供了回調，即僅當圖像載入完成時才執行後續代碼，如代碼清單如下所示。
?
<script type="text/javascript">
function drawBeauty(beauty){
var mycv = document.getElementById("cv");
var myctx = mycv.getContext("2d");
myctx.drawImage(beauty, 0, 0);
}
function load(){
var beauty = new Image();
beauty.src = "http://images.cnblogs.com/cnblogs_com/html5test/359114/r_test.jpg";
if(beauty.complete){
drawBeauty(beauty);
}else{
beauty.onload = function(){
drawBeauty(beauty);
};
beauty.onerror = function(){
window.alert('美女載入失敗，請重試');
};
};
}//load
if (document.all) {
window.attachEvent('onload', load);
}else {
window.addEventListener('load', load, false);
}
</script>基本繪畫
在最基本的畫圖操作中，你需要的只是希望圖像出現處的位置(x和y坐標)。圖像的位置是相對於其左上角來判斷的。使用這種方法，圖像可以簡單的以其原尺寸被畫在畫布上。
drawImage(image, x, y)
var canvas = document.getElementById(『myCanvas』);
var ctx = canvas.getContext(』2d』);ctx.drawImage(myImage, 50, 50);
ctx.drawImage(myImage, 125, 125);
ctx.drawImage(myImage, 210, 210);
縮放及調整尺寸
改變圖像的尺寸，你需要使用重載的drawImage函數，提供給它希望的寬度和高度參數。
drawImage(image, x, y, width, height)
var canvas = document.getElementById(『myCanvas』);
var ctx = canvas.getContext(』2d』);ctx.drawImage(myImage, 50, 50, 100, 100);
ctx.drawImage(myImage, 125, 125, 200, 50);
ctx.drawImage(myImage, 210, 210, 500, 500);
圖像裁剪
最後一個drawImage方法的功用是對圖像進行裁剪。
drawImage(image,
sourceX,
sourceY,
sourceWidth,
sourceHeight,
destX,
destY,
destWidth,
destHeight)
參數很多，但基本上你可以把它想成從原圖中取出一個矩形區域，然後把它畫到畫布上目標區域里。