canvas教程

HTML5技术 Canvas 应用 – WEB前端开发-专注前端开发,关注用户体验

字号+ 作者:H5之家 来源:H5之家 2016-01-15 18:12 我要评论( )

HTML5 Canvas 应用 – WEB前端开发- 专注前端开发,关注用户体验 最近在项目中应用到这样的一种情况。我们使用了一个截图的插件,整合进去浏览器里,当我们调用插件,可以截到一张图,可以拿到图的base64的image编码,这时,我们要把这一些数据生成一张图片

HTML5 Canvas 应用 – WEB前端开发-

专注前端开发,关注用户体验

最近在项目中应用到这样的一种情况。我们使用了一个截图的插件,整合进去浏览器里,当我们调用插件,可以截到一张图,可以拿到图的base64的image编码,这时,我们要把这一些数据生成一张图片,为了能控制好这张图片的大小,我们还要对图片的质量进行一个控制,压缩图片,再上传到服务端,成为我们的图片,这个是我们项目的一个小应用。

刚刚说到的,我们得到了base64后下来的几步就是要用那HTML5的一些技术,会做以下几步:

1. Canvas生成并压缩图片;

2. 用xmlhttprequest上传转换后的图片;

如果说你希望把base64直接上传,不用把图片压缩,可以直接用xmlhttprequest上传的,因为项目要求要攺变大小,就必须要在中间用canvas多做一步了。

在这里只说说Canvas如何去生成图片的,上传那一块有时间再说说。

一、通过base64得到一个img

这个比较容易,浏览器的img标签就有这个功能,var u = new Image();

u.src = 'data:image/jpg;base64,' + base64;

这样就OK了,我们可以得到一个img

二、获取我们刚刚生成的图片

这里我们就要用到Canvas了,我们要把刚刚的那一张图片画进去一个画布里,再通过这一张画布生成一张图,进行压缩。

Canvas提供了一个getContext(“2d”); 的方法得到一个 CanvasRenderingContext2D 对象,其中这个对象会有一个生成图片的功能,

就是 drawImage(image,x,y,width,height),代码如下var q = document.createElement("canvas");

document.body.appendChild(q);

var o = q.getContext("2d");

var w, h;

w = img.width;

h = img.height;

q.width = B;

q.height = x;

o.drawImage(img, 0, 0, w, h);

其实这样就可以看到刚刚你生成的图片的。

三、通过画布压缩图片,取回base64

要用到以下的。var v = q.toDataURL('image/jpg', 0.75); //第一个参数就是生成图片的类型,第二个参数呢就是压缩的质量 0.0 至 1.0

v = w.substring(w.indexOf("base64,") + 7);

v = atob(w); //这个atob要说说。Gecko有内建两个 JavaScript 函式,atob) 和 btoa()。 btoa() 是把一个字串转成 Base64,atob() 是把 Base64 资料转回字串。这个在上传的时候要用到,就是通过charCodeAt返回一个整数,代表指定位置上字符的 Unicode 编码。我们就要上传这个Unicode 编码

贴一下整个例子的代码吧。varbase64 = ""; //base 64外部传入

var n = 'image/jpg';

var q = document.createElement("canvas");

q.style.display = "none";

document.body.appendChild(q);

var o = q.getContext("2d");

var u = new Image();

u.onerror = u.onabort = function() {

};

u.onload = function() {

var w, h;

w = u.width

h = u.height

q.width = w;

q.height = h;

o.drawImage(u, 0, 0, w, h);

var v = q.toDataURL(n, 0.75);

v = w.substring(w.indexOf("base64,") + 7);

v = atob(w);

q.parentNode.removeChild(q);

//G('snip_n_' + new Date().getTime() + ".jpg", 'url', v); 这里是上传图片的方法

};

u.src = 'data:image/jpg;base64,' + base64;

声明:本文采用BY-NC-SA协议进行授权 |WEB前端开发

转载请注明转自《HTML5 Canvas 应用》

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)

    HTML5+Canvas调用手机拍照功能实现图片上传(下)

    2017-04-30 17:00

  • HTML5新特性详解(三)

    HTML5新特性详解(三)

    2017-04-30 16:03

网友点评