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)
参数很多，但基本上你可以把它想成从原图中取出一个矩形区域，然后把它画到画布上目标区域里。