将HTML5 Canvas的内容保存为图片借助toDataURL实现

来源:脚本之家  责任编辑:小易  

var rect={x:100,y:100,w:40,h:20};//定义要画的矩形的位置属性 var canvas=document.getElementById('canvas'); var cxt=canvas.getContext('2d'); cxt.fillRect(rect.x,rect.y,rect.w,rect.h);//绘制矩形 canvas.onclick=function(e){//给can

主要思想是借助Canvas自己的API - toDataURL()来实现,整个实现

HTML + JavaScript的代码很简单。

canvas的todataurl一般是保存的是PNG的BASE64编码,可以用jsp将base64那长一串字符还原成PNG图片,如果要保持JPG,可以再进行格式转换,您的思路没错,祝您成功!

复制代码代码如下:

支持的 var $=function(id){return document.getElementById(id);}var canvasme=$("myCanvas");var ctx=canvasme.getContext("2d");var img = new Image();img.src="liu.png";img.onload=function(){ctx.drawImage(img,10,10);var imgCode=canva

<html>

首先,你这个代码中最后的setInterval("draw()", 100);应该改为setInterval(draw, 100);第一个参数应该是方法名,虽然你那样写也会有效,但强烈建议不要那么写。然后你说你的代码只是在屏幕上闪一下,那么你在画的时候先调一下cxt.beginPath();

<meta http-equiv="X-UA-Compatible" content="chrome=1">

继承Canvas类 ,也是Component 类的子类,所以 调用 Canvas 子类的 .setBounds(arg0, arg1, arg2, arg3); 设置在 窗体容器的位置和大小, 四个参数本别是 x, y , top , bottom,是一个矩形区域 补充:不是没有效果,是你没布局好呀. 控件不显示,一定

<head>

都是一些“今朝有酒今朝醉”的家伙,不用去羡慕他们,说不一定你让他们拿出一万块钱的积蓄,他们都拿不出。一个个打扮得光鲜亮丽的有啥用?我哥哥同一栋楼有一个女人,老公在帮别人装修,一个月运气好的话有一万多块钱,运气不好的话也有五六千,收入在我们当地算不错的了。女的没有上班在家带孩子。这女的长得倒还人模狗样的,但好赌,好吃喝,好打扮。每天打扮得花枝招展的穿梭于各个麻将馆,乐此不疲。这“三好”不要紧,却苦了他老公了,一个月不管挣多少,女的在家一分没存下,还经常拆东墙补西墙。男的是孤儿,娶个媳妇不容易,所以也舍不得拆散这个家,无奈何只有忍受……有一次男的半夜得了阑尾炎,疼得直打滚,送到医院要六千块押金住院

<script>

主要是太薄了。前面答主都说明了什么叫“广片”什么叫“鸡蛋壳”。我就不重复了。想当年我刚跟先生结婚的时候,我在先生珠宝仓库里看上了一个戒指吊坠两用款的蝴蝶吊坠,觉得美丽极了。先生说这个东西一般,你愿意戴就戴吧。可对于刚接触翡翠的我来说,这个太漂亮了。如下图(取自网络图片,我的那个不知道扔哪里去了)。当时只是偶尔戴一下,某天我一朋友说你的吊坠怎么少了一个角,仔细一看,真的蝴蝶翅膀少了一个角角(如下图蓝色线标记的位置),我真什么活都不干啊,啥时候碰坏的呢。跟先生说再帮我换一个翅膀,他说找到合适的不容易。我问为啥这么容易坏。他的大概意思就是那种料子本来颜色很暗不透亮,然后就要把它磨的薄薄的,这样看起来

window.onload = function() {

家长只要耐心教导,孩子就很快能学会。宝宝的上衣有的前面系扣,有的套头,套头的衣服穿起来相对比较麻烦,家长可从教宝宝穿前面系扣的衣服开始,再教他穿套头衫。通常在宝宝4岁左右,就可以请他配合穿衣服了。刚开始,家长可以通过玩游戏的方式,激发宝宝配合的热情。如,让宝宝学习把胳膊伸进袖子里,可以这么说“宝宝的小手要钻山洞了”,慢慢的,宝宝就会自觉地把胳膊伸进去。教宝宝学扣扣子,则需要家长比较细致的指导。首先,告诉宝宝扣扣子的步骤:先把扣子的一半塞到扣眼里,再把另一半扣子拉过来,同时配以很慢的示范动作,反复多做几次,然后让宝宝自己操作,及时纠正宝宝不正确的动作。其次,也可以让宝宝在娃娃身上练习。另外,要注

draw();

随着全运会乒乓球比赛的不断进展,目前已经产生了男女乒团体四强,其中在女乒四强中,朱雨玲领衔的四川队被视为夺冠热门之一。四川队在本届全运会上先是在小组赛中掀翻了卫冕冠军山东女乒,在淘汰赛首轮更是3:1力克2015年全锦赛女团冠军山西队,其中四川主将朱雨玲在第一盘和第四盘以两个3:0横扫了李晓丹和武杨两位国手,表现令人惊叹。除了在全运会上发挥出色之外,四川队在近几年的国内大赛中表现都不错,去年的全锦赛上,朱雨玲不仅拿下了女单三连冠,成为全锦赛历史上女子第一人,更是帮助四川队历史性拿下了女团冠军,成为国内乒坛新贵。四川队近年来为何进入如此之外,与教练员和队员的齐心合作有很大关系。首先从教练员的情况来

var saveButton = document.getElementById("saveImageBtn");

bindButtonEvent(saveButton, "click", saveImageInfo);

var dlButton = document.getElementById("downloadImageBtn");

bindButtonEvent(dlButton, "click", saveAsLocalImage);

};

function draw(){

var canvas = document.getElementById("thecanvas");

var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgba(125, 46, 138, 0.5)";

ctx.fillRect(25,25,100,100);

ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";

ctx.fillRect(58, 74, 125, 100);

ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color

ctx.fillText("Gloomyfish - Demo", 50, 50);

}

function bindButtonEvent(element, type, handler)

{

if(element.addEventListener) {

element.addEventListener(type, handler, false);

} else {

element.attachEvent('on'+type, handler);

}

}

function saveImageInfo ()

{

var mycanvas = document.getElementById("thecanvas");

var image = mycanvas.toDataURL("image/png");

var w=window.open('about:blank','image from canvas');

w.document.write("<img src='"+image+"' alt='from canvas'/>");

}

function saveAsLocalImage () {

var myCanvas = document.getElementById("thecanvas");

// here is the most important part because if you dont replace you will get a DOM 18 exception.

// var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");

var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

window.location.href=image; // it will save locally

}

</script>

</head>

<body bgcolor="#E6E6FA">

<div>

<canvas width=200 height=200 id="thecanvas"></canvas>

<button id="saveImageBtn">Save Image</button>

<button id="downloadImageBtn">Download Image</button>

</div>

</body>

</html>

运行效果如下

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

html5 canvas在线生成图片后怎么样保存到数据库(服务器端)而不是本地?

canvas画布保存为图片:function convertCanvasToImage(canvas) {

  var image = new Image();

  image.src = canvas.toDataURL("image/png");

  return image;

canvas参数为你的canvas对象,返回一个图片对象,你可以将这个image放到网页结构中,如果要保存图像,可以将canvas.toDataURL("image/png")返回的base64格式的图片数据放到input(type=hidden)中,用户点击上传按钮(或设置表单自动提交),将base64格式的数据上传

形如:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABbSURBVDhPY8AFMvJL/oMwlEs8yMgvJVcjyMbSYaERogCC0/OAGIkPwaVQMUhgQWiggWANIAzUhKoBpgjdMIhBUHsxAdxkUgHMBiiXeDAQNkICAsolHuC3kYEBAG/wdxC2W2tUAAAAAElFTkSuQmCC

服务器端接收到字符串(以上字符串可以直接在浏览器中打开,IE低版本就算了,能用canvas的浏览器都可以)后根据data:image/png得知应该保存的文件类型扩展名(png),然后将base64,后面的base64编码字符串解码(后端语言实现,如PHP用base64_decode()函数),将解码后的二进制数据以二进制的形式保存到服务器上(图片形式)

如果存数据库,可以直接存base64编码,读取时候解码也行,图片建议以文件形式存储,数据库不适合存大文件

怎样将html5中利用canvas绘制的图像在服务端保存为图片

首先你得搞明白为什么需要Base64这个东西,Base64的主要应用场景就是把二进制(Binary)的内容通过一个映射转换到可以用ASCII字符表达的字符串,然后便于使用HTTP协议在客户端和服务器端传输数据。所以,关键的一部你做的有些问题

byte[] bytes=decoder.decodeBuffer(s);

这里解码出来的byte[]已经是你的图片内容了,这些byte不可能再成功的构造成字符串了,否则为何还需要用Base64啊。所以,你需要保存的是解码出来的byte[],而不是Base64的字符串。

另外,Base64的编解码器,你用的那个BASE64Decoder是sun.misc提供的,为了确保最大化的兼容,比如运行在非Sun JVM的环境时,建议使用apache的common-codec。

为什么在html5中取到了canvas画布,但是执行canvas.toDataURL不成功?

1. 关于toDataURL(type, ratio)函数,参数type在image/png,image/jpeg,image/svg+xml等 MIME类型中选择(可以不填,默认是image/png)。如果是type = “image/jpeg”,可以有第二个参数,如果第二个参数ratio的值在0-1之间,则表示JPEG的质量等级,否则使用浏览器内置默认质量等级。

2. 关于getImageData()函数,这个涉及到js安全问题,你的代码涉及到了跨域访问,比如你在上面画了某个图片。

解决办法有2个:要么用firefox(推荐),要么自己架设一个web服务器,网页放里面,然后浏览器访问(如果只是自己玩玩js+canvas的话可以使用Aptana Studio 3,比较方便,不需要设置什么)本回答被网友采纳

HTML5如何通过canvas,把两张图片绘制到画布,然后导出大图

<img src="......." id="img1" />

<img src="......." id="img2" />

<img id="img3" />var img1 = document.getElementById("img1"),

    img2 = document.getElementById("img2"),

    img3 = document.getElementById("img3");

var canvas = document.createElement("canvas"),

    context = canvas.getContext("2d");

canvas.width = img1.naturalWidth + img2.naturalWidth;

canvas.height = Math.max(img1.naturalHeight,img2.naturalHeight);

// 将 img1 加入画布

context.drawImage(img1,0,0,img1.naturalWidth,img1.naturalHeight);

// 将 img2 加入画布

context.drawImage(img1,img2.naturalWidth,0,img2.naturalWidth,img2.naturalHeight);

// 将画布内容导出

var src = canvas.toDataURL();

img3.src = src;<p>drawImage 的使用方法可以去这里看一下</p>

<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage" />

求一个html5 canvas生成图片上传到服务器,后端servlet处理保存图片的例子

我之前有做过这个应用,这不难

首先,在 canvas 生成你要的图片时,你要用 js 先暂存起来

最后生成一张实体图片,用 ajax 方式推送到服务器来保存图片

你可以私信我询问详细

  • 本文相关:
  • html5 canvas基本绘图之绘制阴影效果
  • html5 canvas基本绘图之文字渲染
  • html5 canvas基本绘图之绘制曲线
  • html5 canvas基本绘图之图形变换
  • html5 canvas基本绘图之填充样式实现
  • html5 canvas基本绘图之绘制线条
  • html5 canvas基本绘图之绘制五角星
  • html5 canvas基本绘图之绘制矩形
  • 在html5 canvas中放入图片和保存为图片的方法
  • html5 canvas画图并保存成图片的jcanvas插件
  • html5 canvas在线生成图片后怎么样保存到数据库(服...
  • 怎样将html5中利用canvas绘制的图像在服务端保存为...
  • 为什么在html5中取到了canvas画布,但是执行canvas...
  • HTML5如何通过canvas,把两张图片绘制到画布,然后...
  • 求一个html5 canvas生成图片上传到服务器,后端ser...
  • HTML5 Canvas 鼠标点击到图片时进行操作
  • 关于HTML5,canvas插件的问题,求解答
  • IE9支持html5的canvas的toDataURL()方法嘛?谢谢!...
  • 关于html5 canvas 绘图动画的问题,我要实现把一张...
  • html5 canvas上面画的图形,有没有类似于ID,Value...
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved