前端实现 SVG 转 PNG

2015/11/16 · JavaScript
· PNG,
SVG

原文出处: 百度FEX –
zhangbobell   

点评:创建一个只管的用户界面,并允许你控制图片的大小。上传到服务器端的数据,并不需要处理enctype为
multi-part/form-data 的情况,仅仅一个简单的POST表单处理程序就可以了.
好了,下面附上完整的代码示例

前言

svg 是一种矢量图形,在 web
上应用很广泛,但是很多时候由于应用的场景,常常需要将 svg 转为 png
格式,下载到本地等。随着浏览器对 HTML 5 的支持度越来越高,我们可以把 svg
转为 png 的工作交给浏览器来完成。

示例地址:Canvas Resize Demo
原文作者:Dr. Tom Trenka
原文日期: 2013年8月6日
翻译日期: 2013年8月8日

一般方式

  1. 创建 imageimage,src = xxx.svg;
  2. 创建 canvas,dragImage 将图片贴到 canvas 上;
  3. 利用 toDataUrl 函数,将 canvas 的表示为 url;
  4. new image, src = url, download = download.png;

但是,在转换的时候有时有时会碰到如下的如下的两个问题:

Tom Trenka
能为”我”的博客写一篇文章,对我来说是一个巨大的荣誉。Tom是Dojo框架的最初贡献者之一,也是我在SitePen公司的良师益友.我见证了他最顶级的天才能力,并且他总是第一个以前瞻性的解决方案预见了很多棘手的问题。他总是站在局外思考,打破常规但却又坚实可靠地解决边缘问题。本文就是一个完美的例证。
最近我总是被问道要创造一个用户接口API,允许用户上传图片到服务器上(伴随其他的事情),并能在我们公司提供支持的大量网站的客户端上使用。通常来说这都是很容易的事情——创建一个form表单,添加一个file类型的input输入框,让用户从电脑里选择图片,并在form标签上设置enctype=”multipart/form-data”表单属性,然后上传即可。非常简单,不是吗?事实上,这里有一个足够简单的例子;点击进入
但是如果你想要通过某些方式预先处理一下图片再上传,那该怎么办?比如说,你必须先压缩图片尺寸,或者需要图片只能是某些种类的格式,如
png 或者jpg,你怎么办?
用canvas来解决!

问题 1 :浏览器对 canvas 限制

Canvas 的 W3C 的标准上没有提及 canvas
的最大高/宽度和面积,但是每个厂商的浏览器出于浏览器性能的考虑,在不同的平台上设置了最大的高/宽度或者是渲染面积,超过了这个阈值渲染的结果会是空白。测试了几种浏览器的
canvas 性能如下:

  • chrome (版本 46.0.2490.80 (64-bit))
    • 最大面积:268, 435, 456 px^2 = 16, 384 px * 16, 384 px
    • 最大宽/高:32, 767 px
  • firefox (版本 42.0)
    • 最大面积:32, 767 px * 16, 384 px
    • 最大宽/高:32, 767px
  • safari (版本 9.0.1 (11601.2.7.2))
    • 最大面积: 268, 435, 456 px^2 = 16, 384 px * 16, 384 px
  • ie 10(版本 10.0.9200.17414)
    • 最大宽/高: 8, 192px * 8, 192px

在一般的 web
应用中,可能很少会超过这些限制。但是,如果超过了这些限制,则
会导致导出为空白或者由于内存泄露造成浏览器崩溃。

而且从另一方面来说, 导出 png
也是一项很消耗内存的操作,粗略估算一下,导出 16, 384 px * 16, 384 px 的
svg 会消耗 16384 * 16384 * 4 / 1024 / 1024 = 1024 M
的内存。所以,在接近这些极限值的时候,浏览器也会
反应变慢,能否导出成功也跟系统的可用内存大小等等都有关系。

对于这个问题,有如下两种解决方法:

  1. 将数据发送给后端,在后端完成 转换;
  2. 前端将 svg 切分成多个图片导出;

第一种方法可以使用 PhantomJS、inkscape、ImageMagick
等工具,相对来说比较简单,这里我们主要探讨第二种解决方法。

Canvas简介
canvas
是一个HTML5新增的DOM元素,允许用户在页面上直接地绘制图形,通常是使用JavaScript.而不同的格式标准也是不同的,比如SVG是光栅API(raster
API) 而VML却是向量API(vector API).可以考虑使用Adobe
Illustrator(矢量图)作图与使用 Adobe Photoshop (光栅图)作图的区别。

svg 切分成多个图片导出

思路:浏览器虽然对 canvas 有尺寸和面积的限制,但是对于 image
元素并没有明确的限制,也就是第一步生成的 image
其实显示是正常的,我们要做的只是在第二步 dragImage 的时候分多次将
image 元素切分并贴到 canvas 上然后下载下来。 同时,应注意到 image
的载入是一个异步的过程。

关键代码

JavaScript

// 构造 svg Url,此处省略将 svg 经字符过滤后转为 url 的过程。 var svgUrl
= DomURL.createObjectURL(blob); var svgWidth =
document.querySelector(‘#kity_svg’).getAttribute(‘width’); var
svgHeight =
document.querySelector(‘#kity_svg’).getAttribute(‘height’); //
分片的宽度和高度,可根据浏览器做适配 var w0 = 8192; var h0 = 8192; //
每行和每列能容纳的分片数 var M = Math.ceil(svgWidth / w0); var N =
Math.ceil(svgHeight / h0); var idx = 0;
loadImage(svgUrl).then(function(img) { while(idx < M * N) { //
要分割的面片在 image 上的坐标和尺寸 var targetX = idx % M * w0, targetY
= idx / M * h0, targetW = (idx + 1) % M ? w0 : (svgWidth – (M – 1) *
w0), targetH = idx >= (N – 1) * M ? (svgHeight – (N – 1) * h0) :
h0; var canvas = document.createElement(‘canvas’), ctx =
canvas.getContext(‘2d’); canvas.width = targetW; canvas.height =
targetH; ctx.drawImage(img, targetX, targetY, targetW, targetH, 0, 0,
targetW, targetH); console.log(‘now it is ‘ + idx); // 准备在前端下载
var a = document.createElement(‘a’); a.download = ‘naotu-‘ + idx +
‘.png’; a.href = canvas.toDataURL(‘image/png’); var clickEvent = new
MouseEvent(‘click’, { ‘view’: window, ‘bubbles’: true, ‘cancelable’:
false }); a.dispatchEvent(clickEvent); idx++; } }, function(err) {
console.log(err); }); // 加载 image function loadImage(url) { return new
Promise(function(resolve, reject) { var image = new Image(); image.src =
url; image.crossOrigin = ‘Anonymous’; image.onload = function() {
resolve(this); }; image.onerror = function(err) { reject(err); }; }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// 构造 svg Url,此处省略将 svg 经字符过滤后转为 url 的过程。
var svgUrl = DomURL.createObjectURL(blob);
var svgWidth = document.querySelector(‘#kity_svg’).getAttribute(‘width’);
var svgHeight = document.querySelector(‘#kity_svg’).getAttribute(‘height’);
 
// 分片的宽度和高度,可根据浏览器做适配
var w0 = 8192;
var h0 = 8192;
 
// 每行和每列能容纳的分片数
var M = Math.ceil(svgWidth / w0);
var N = Math.ceil(svgHeight / h0);
 
var idx = 0;
loadImage(svgUrl).then(function(img) {
 
    while(idx < M * N) {
        // 要分割的面片在 image 上的坐标和尺寸
        var targetX = idx % M * w0,
            targetY = idx / M * h0,
            targetW = (idx + 1) % M ? w0 : (svgWidth – (M – 1) * w0),
            targetH = idx >= (N – 1) * M ? (svgHeight – (N – 1) * h0) : h0;
 
        var canvas = document.createElement(‘canvas’),
            ctx = canvas.getContext(‘2d’);
 
            canvas.width = targetW;
            canvas.height = targetH;
 
            ctx.drawImage(img, targetX, targetY, targetW, targetH, 0, 0, targetW, targetH);
 
            console.log(‘now it is ‘ + idx);
 
            // 准备在前端下载
            var a = document.createElement(‘a’);
            a.download = ‘naotu-‘ + idx + ‘.png’;
            a.href = canvas.toDataURL(‘image/png’);
 
            var clickEvent = new MouseEvent(‘click’, {
                ‘view’: window,
                ‘bubbles’: true,
                ‘cancelable’: false
            });
 
            a.dispatchEvent(clickEvent);
 
        idx++;
    }
 
}, function(err) {
    console.log(err);
});
 
// 加载 image
function loadImage(url) {
    return new Promise(function(resolve, reject) {
        var image = new Image();
 
        image.src = url;
        image.crossOrigin = ‘Anonymous’;
        image.onload = function() {
            resolve(this);
        };
 
        image.onerror = function(err) {
            reject(err);
        };
    });
}

说明:

  1. 由于在前端下载有浏览器兼容性、用户体验等问题,在实际中,可能需要将生成后的数据发送到后端,并作为一个压缩包下载。
  2. 分片的尺寸这里使用的是 8192 *
    9192,在实际中,为了增强兼容性和体验,可以根据浏览器和平台做适配,例如在
    iOS 下的 safari 的最大面积是 4096 *4096。

在canvas(画布)上能做的事情就是读取和渲染图像,并且允许你通过JavaScript操纵图像数据。已经有很多现存的文章来为你演示基本的图像处理——主要关注与各种不同的图像过滤技术(
image filtering
techniques)——但我们需要的仅仅是缩放图片并转换到特定的文件格式,而canvas完全可以做到这些事情。

问题 2 :导出包含图片的 svg

在导出的时候,还会碰到另一个问题:如果 svg
里面包含图片,你会发现通过以上方法导出的 png
里面,原来的图片是不显示的。一般认为是 svg
里面包含的图片跨域了,但是如果你把这个图片换成本域的图片,还是会出现这种情况。银河国际平台官方网站 1

图片中上部分是导出前的 svg,下图是导出后的 png。svg
中的图片是本域的,在导出后不显示。

我们假定的需求,比如图像高度不超过100像素,不管原始图像有多高。基本的代码如下所示:

问题来源

我们按照文章最开始提出的步骤,逐步排查,会发现在第一步的时候,svg
中的图片就不显示了。也就是,当 image 元素的 src 为一个 svg,并且 svg
里面包含图片,那么被包含的图片是不会显示的,即使这个图片是本域的。

W3C 关于这个问题并没有
做说明,最后在  找到了关于这个问题的说明。
意思是:禁止这么做是出于安全考虑,svg 里面引用的所有 外部资源 包括
image, stylesheet, script 等都会被阻止。

里面还举了一个例子:假设没有这个限制,如果一个论坛允许用户上传这样的 svg
作为头像,就有可能出现这样的场景,一位黑客上传 svg
作为头像,里面包含代码:<image xlink:href="http://evilhacker.com/myimage.png">(假设这位黑客拥有对于
evilhacker.com 的控制权),那么这位黑客就完全能做到下面的事情:

  • 只要有人查看他的资料,evilhacker.com 就会接收到一次 ping
    的请求(进而可以拿到查看者的 ip);
  • 可以做到对于不同的 ip 地址的人展示不一样的头像;
  • 可以随时更换头像的外观(而不用通过论坛管理员的审核)。

看到这里,大概就明白了整个问题的来龙去脉了,当然还有一点原因可能是避免图像递归。

代码如下:

解决办法

思路:由于安全因素,其实第一步的时候,图片已经显示不出来了。那么我们现在考虑的方法是在第一步之后遍历
svg 的结构,将所有的 image 元素的
url、位置和尺寸保存下来。在第三步之后,按顺序贴到 canvas
上。这样,最后导出的 png 图片就会有 svg 里面的 image。银河国际平台官方网站,关键代码

JavaScript

// 此处略去生成 svg url 的过程 var svgUrl =
DomURL.createObjectURL(blob); var svgWidth =
document.querySelector(‘#kity_svg’).getAttribute(‘width’); var
svgHeight =
document.querySelector(‘#kity_svg’).getAttribute(‘height’); var
embededImages = document.querySelectorAll(‘#kity_svg image’); // 由
nodeList 转为 array embededImages =
Array.prototype.slice.call(embededImages); // 加载底层的图
loadImage(svgUrl).then(function(img) { var canvas =
document.createElement(‘canvas’), ctx = canvas.getContext(“2d”);
canvas.width = svgWidth; canvas.height = svgHeight; ctx.drawImage(img,
0, 0); // 遍历 svg 里面所有的 image 元素
embededImages.reduce(function(sequence, svgImg){ return
sequence.then(function() { var url = svgImg.getAttribute(‘xlink:href’) +
‘abc’, dX = svgImg.getAttribute(‘x’), dY = svgImg.getAttribute(‘y’),
dWidth = svgImg.getAttribute(‘width’), dHeight =
svgImg.getAttribute(‘height’); return loadImage(url).then(function(
sImg) { ctx.drawImage(sImg, 0, 0, sImg.width, sImg.height, dX, dY,
dWidth, dHeight); }, function(err) { console.log(err); }); },
function(err) { console.log(err); }); },
Promise.resolve()).then(function() { // 准备在前端下载 var a =
document.createElement(“a”); a.download = ‘download.png’; a.href =
canvas.toDataURL(“image/png”); var clickEvent = new MouseEvent(“click”,
{ “view”: window, “bubbles”: true, “cancelable”: false });
a.dispatchEvent(clickEvent); }); }, function(err) { console.log(err); })
// 省略了 loadImage 函数 // 代码和第一个例子相同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// 此处略去生成 svg url 的过程
var svgUrl = DomURL.createObjectURL(blob);
var svgWidth = document.querySelector(‘#kity_svg’).getAttribute(‘width’);
var svgHeight = document.querySelector(‘#kity_svg’).getAttribute(‘height’);
 
var embededImages = document.querySelectorAll(‘#kity_svg image’);
// 由 nodeList 转为 array
embededImages = Array.prototype.slice.call(embededImages);
// 加载底层的图
loadImage(svgUrl).then(function(img) {
 
var canvas = document.createElement(‘canvas’),
ctx = canvas.getContext("2d");
 
canvas.width = svgWidth;
canvas.height = svgHeight;
 
ctx.drawImage(img, 0, 0);
    // 遍历 svg 里面所有的 image 元素
    embededImages.reduce(function(sequence, svgImg){
 
        return sequence.then(function() {
            var url = svgImg.getAttribute(‘xlink:href’) + ‘abc’,
                dX = svgImg.getAttribute(‘x’),
                dY = svgImg.getAttribute(‘y’),
                dWidth = svgImg.getAttribute(‘width’),
                dHeight = svgImg.getAttribute(‘height’);
 
            return loadImage(url).then(function( sImg) {
                ctx.drawImage(sImg, 0, 0, sImg.width, sImg.height, dX, dY, dWidth, dHeight);
            }, function(err) {
                console.log(err);
            });
        }, function(err) {
            console.log(err);
        });
    }, Promise.resolve()).then(function() {
        // 准备在前端下载
        var a = document.createElement("a");
        a.download = ‘download.png’;
        a.href = canvas.toDataURL("image/png");
 
        var clickEvent = new MouseEvent("click", {
            "view": window,
            "bubbles": true,
            "cancelable": false
        });
 
        a.dispatchEvent(clickEvent);
 
        });
 
      }, function(err) {
        console.log(err);
   })
 
   // 省略了 loadImage 函数
   // 代码和第一个例子相同

说明

  1. 例子中 svg 里面的图像是根节点下面的,因此用于表示位置的 x, y
    直接取来即可使用,在实际中,这些位置可能需要跟其他属性做一些运算之后得出。如果是基于
    svg
    库构建的,那么可以直接使用库里面用于定位的函数,比直接从底层运算更加方便和准确。
  2. 我们这里讨论的是本域的图片的导出问题,跨域的图片由于「污染了」画布,在执行 toDataUrl 函数的时候会报错。

// 参数,最大高度
var MAX_HEIGHT = 100;
// 渲染
function render(src){
// 创建一个 Image 对象
var image = new Image();
// 绑定 load 事件处理器,加载完成后执行
image.onload = function(){
// 获取 canvas DOM 对象
var canvas = document.getElementById(“myCanvas”);
// 如果高度超标
if(image.height > MAX_HEIGHT) {
// 宽度等比例缩放 *=
image.width *= MAX_HEIGHT / image.height;
image.height = MAX_HEIGHT;
}
// 获取 canvas的 2d 环境对象,
// 可以理解Context是管理员,canvas是房子
var ctx = canvas.getContext(“2d”);
// canvas清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 重置canvas宽高
canvas.width = image.width;
canvas.height = image.height;
// 将图像绘制到canvas上
ctx.drawImage(image, 0, 0, image.width, image.height);
// !!! 注意,image 没有加入到 dom之中
};
// 设置src属性,浏览器会自动加载。
// 记住必须先绑定事件,才能设置src属性,否则会出同步问题。
image.src = src;
};

结语

在这里和大家分享了 在前端将 svg 转为 png
的方法和过程中可能会遇到的两个问题,一个是浏览器对 canvas
的尺寸限制,另一个是导出图片的问题。当然,这两个问题还有其他的解决方法,同时由于知识所限,本文内容难免有纰漏,欢迎大家批评指正。最后感谢@techird 和 @Naxior 关于这两个问题的讨论。

1 赞 2 收藏
评论

银河国际平台官方网站 2

在上面的例子中,你可以使用canvas 的 toDataURL() 方法获取图像的
Base64编码的值(可以类似理解为16进制字符串,或者二进制数据流).
注意: canvas 的 toDataURL() 获取的URL以字符串开头,有22个无用的数据
“data:image/png;base64,”,需要在客户端或者服务端进行过滤.
原则上只要浏览器支持,URL地址的长度是没有限制的,而1024的长度限制,是老一代IE所独有的。

请问,如何获取我们需要的图像呢?
好孩子,很高兴你能这么问。你并不能通过File
输入框来直接处理,你从这个文件输入框元素所能获取的仅仅是用户所选择文件的path路径。按照常规想象,你可以通过这个path路径信息来加载图像,但是,在浏览器里面这是不现实的。(译者注:浏览器厂商必须保证自己的浏览器绝对安全,才能获得市场,至少避免媒体的攻击,如果允许这样做,那恶意网址可以通过拼凑文件路径来尝试获取某些敏感信息).
为了实现这个需求,我们可以使用HTML5的File API
来读取用户磁盘上的文件,并用这个file来作为图像的源(src,source).

File API简介
新的File
API接口是在不违背任何安全沙盒规则下,读取和列出用户文件目录的一个途径——
通过沙盒(sandbox)限制,恶意网站并不能将病毒写入用户磁盘,当然更不能执行。
我们要使用的文件读取对象叫做
FileReader,FileReader允许开发者读取文件的内容(具体浏览器的实现方式可能大不相同)。

假设我们已经获取了图像文件的path路径,那么依赖前面的代码,使用FileReader来加载和渲染图像就变得很容易了:

代码如下:

// 加载 图像文件(url路径)
function loadImage(src){
// 过滤掉 非 image 类型的文件
if(!src.type.match(/image.*/)){
if(window.console){
console.log(“选择的文件类型不是图片: “, src.type);
} else {
window.confirm(“只能选择图片文件”);
}
return;
}
// 创建 FileReader 对象 并调用 render 函数来完成渲染.
var reader = new FileReader();
// 绑定load事件自动回调函数
reader.onload = function(e){
// 调用前面的 render 函数
render(e.target.result);
};
// 读取文件内容
reader.readAsDataURL(src);
};

请问,如何获取文件呢?
小白兔,要有耐心!我们的下一步就是获取文件,当然有好多方法可以实现啦。例如:你可以用文本框让用户输入文件路径,但很显然大多数用户都不是开发者,对输入什么值根本就不了解.
为了用户使用方便,我们采用 Drag and Drop API接口。

使用 Drag and Drop API
拖拽接口(Drag and
Drop)非常简单——在大多数的DOM元素上,你都可以通过绑定事件处理器来实现.
只要用户从磁盘上拖动一个文件到dom对象上并放开鼠标,那我们就可以读取这个文件。代码如下:

代码如下:

function init(){
// 获取DOM元素对象
var target = document.getElementById(“drop-target”);
// 阻止 dragover(拖到DOM元素上方) 事件传递
target.addEventListener(“dragover”, function(e){e.preventDefault();},
true);
// 拖动并放开鼠标的事件
target.addEventListener(“drop”, function(e){
// 阻止默认事件,以及事件传播
e.preventDefault();
// 调用前面的加载图像 函数,参数为dataTransfer对象的第一个文件
loadImage(e.dataTransfer.files[0]);
}, true);
var setheight = document.getElementById(“setheight”);
var maxheight = document.getElementById(“maxheight”);
setheight.addEventListener(“click”, function(e){
//
var value = maxheight.value;
if(/^\d+$/.test(value)){
MAX_HEIGHT = parseInt(value);
}
e.preventDefault();
},true);
var btnsend = document.getElementById(“btnsend”);
btnsend.addEventListener(“click”, function(e){
//
sendImage();
},true);
};

我们还可以做一些其他的处理,比如显示预览图。但如果不想压缩图片的话,那很可能没什么用。我们将采用Ajax通过HTTP
的post方式上传图片数据。下面的例子是使用Dojo框架来完成请求的,当然你也可以采用其他的Ajax技术来实现.
Dojo 代码如下:

代码如下:

// 译者并不懂Dojo,所以将在后面附上jQuery的实现
// Remember that DTK 1.7+ is AMD!
require([“dojo/request”], function(request){
// 设置请求URL,参数,以及回调。
request.post(“image-handler.php”, {
data: {
imageName: “myImage.png”,
imageData:
encodeURIComponent(document.getElementById(“canvas”).toDataURL(“image/png”))
}
}).then(function(text){
console.log(“The server returned: “, text);
});
});

jQuery 实现如下:

代码如下:

// 上传图片,jQuery版
function sendImage(){
// 获取 canvas DOM 对象
var canvas = document.getElementById(“myCanvas”);
// 获取Base64编码后的图像数据,格式是字符串
//
“data:image/png;base64,”开头,需要在客户端或者服务器端将其去掉,后面的部分可以直接写入文件。
var dataurl = canvas.toDataURL(“image/png”);
// 为安全 对URI进行编码
// data%3Aimage%2Fpng%3Bbase64%2C 开头
var imagedata = encodeURIComponent(dataurl);
//var url = $(“#form”).attr(“action”);
// 1. 如果form表单不好处理,可以使用某个hidden隐藏域来设置请求地址
// <input type=”hidden” name=”action” value=”receive.jsp” />
var url = $(“input[name=’action’]”).val();
// 2. 也可以直接用某个dom对象的属性来获取
// <input id=”imageaction” type=”hidden” action=”receive.jsp”>
// var url = $(“#imageaction”).attr(“action”);
// 因为是string,所以服务器需要对数据进行转码,写文件操作等。
// 个人约定,所有http参数名字全部小写
console.log(dataurl);
//console.log(imagedata);
var data = {
imagename: “myImage.png”,
imagedata: imagedata
};
jQuery.ajax( {
url : url,
data : data,
type : “POST”,
// 期待的返回值类型
dataType: “json”,
complete : function(xhr,result) {
//console.log(xhr.responseText);
var $tip2 = $(“#tip2”);
if(!xhr){
$tip2.text(‘网络连接失败!’);
return false;
}
var text = xhr.responseText;
if(!text){
$tip2.text(‘网络错误!’);
return false;
}
var json = eval(“(“+text+”)”);
if(!json){
$tip2.text(‘解析错误!’);
return false;
} else {
$tip2.text(json.message);
}
//console.dir(json);
//console.log(xhr.responseText);
}
});
};

OK,搞定!你还需要做的,就是创建一个只管的用户界面,并允许你控制图片的大小。上传到服务器端的数据,并不需要处理enctype为
multi-part/form-data 的情况,仅仅一个简单的POST表单处理程序就可以了.
好了,下面附上完整的代码示例:

代码如下:

<%@ page language=”java” import=”java.util.*”
pageEncoding=”UTF-8″%>
<%
String path = request.getContextPath();
String basePath =
request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;
%>
<!DOCTYPE html>
<html>
<head>
<title>通过Canvas及File API缩放并上传图片</title>
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
<meta http-equiv=”keywords” content=”Canvas,File,Image”>
<meta http-equiv=”description”
content=”2013年8月8日,[email protected]”>
<script
src=”;
<script>
// 参数,最大高度
var MAX_HEIGHT = 100;
// 渲染
function render(src){
// 创建一个 Image 对象
var image = new Image();
// 绑定 load 事件处理器,加载完成后执行
image.onload = function(){
// 获取 canvas DOM 对象
var canvas = document.getElementById(“myCanvas”);
// 如果高度超标
if(image.height > MAX_HEIGHT) {
// 宽度等比例缩放 *=
image.width *= MAX_HEIGHT / image.height;
image.height = MAX_HEIGHT;
}
// 获取 canvas的 2d 环境对象,
// 可以理解Context是管理员,canvas是房子
var ctx = canvas.getContext(“2d”);
// canvas清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 重置canvas宽高
canvas.width = image.width;
canvas.height = image.height;
// 将图像绘制到canvas上
ctx.drawImage(image, 0, 0, image.width, image.height);
// !!! 注意,image 没有加入到 dom之中
};
// 设置src属性,浏览器会自动加载。
// 记住必须先绑定事件,才能设置src属性,否则会出同步问题。
image.src = src;
};
// 加载 图像文件(url路径)
function loadImage(src){
// 过滤掉 非 image 类型的文件
if(!src.type.match(/image.*/)){
if(window.console){
console.log(“选择的文件类型不是图片: “, src.type);
} else {
window.confirm(“只能选择图片文件”);
}
return;
}
// 创建 FileReader 对象 并调用 render 函数来完成渲染.
var reader = new FileReader();
// 绑定load事件自动回调函数
reader.onload = function(e){
// 调用前面的 render 函数
render(e.target.result);
};
// 读取文件内容
reader.readAsDataURL(src);
};
// 上传图片,jQuery版
function sendImage(){
// 获取 canvas DOM 对象
var canvas = document.getElementById(“myCanvas”);
// 获取Base64编码后的图像数据,格式是字符串
//
“data:image/png;base64,”开头,需要在客户端或者服务器端将其去掉,后面的部分可以直接写入文件。
var dataurl = canvas.toDataURL(“image/png”);
// 为安全 对URI进行编码
// data%3Aimage%2Fpng%3Bbase64%2C 开头
var imagedata = encodeURIComponent(dataurl);
//var url = $(“#form”).attr(“action”);
// 1. 如果form表单不好处理,可以使用某个hidden隐藏域来设置请求地址
// <input type=”hidden” name=”action” value=”receive.jsp” />
var url = $(“input[name=’action’]”).val();
// 2. 也可以直接用某个dom对象的属性来获取
// <input id=”imageaction” type=”hidden” action=”receive.jsp”>
// var url = $(“#imageaction”).attr(“action”);
// 因为是string,所以服务器需要对数据进行转码,写文件操作等。
// 个人约定,所有http参数名字全部小写
console.log(dataurl);
//console.log(imagedata);
var data = {
imagename: “myImage.png”,
imagedata: imagedata
};
jQuery.ajax( {
url : url,
data : data,
type : “POST”,
// 期待的返回值类型
dataType: “json”,
complete : function(xhr,result) {
//console.log(xhr.responseText);
var $tip2 = $(“#tip2”);
if(!xhr){
$tip2.text(‘网络连接失败!’);
return false;
}
var text = xhr.responseText;
if(!text){
$tip2.text(‘网络错误!’);
return false;
}
var json = eval(“(“+text+”)”);
if(!json){
$tip2.text(‘解析错误!’);
return false;
} else {
$tip2.text(json.message);
}
//console.dir(json);
//console.log(xhr.responseText);
}
});
};
function init(){
// 获取DOM元素对象
var target = document.getElementById(“drop-target”);
// 阻止 dragover(拖到DOM元素上方) 事件传递
target.addEventListener(“dragover”, function(e){e.preventDefault();},
true);
// 拖动并放开鼠标的事件
target.addEventListener(“drop”, function(e){
// 阻止默认事件,以及事件传播
e.preventDefault();
// 调用前面的加载图像 函数,参数为dataTransfer对象的第一个文件
loadImage(e.dataTransfer.files[0]);
}, true);
var setheight = document.getElementById(“setheight”);
var maxheight = document.getElementById(“maxheight”);
setheight.addEventListener(“click”, function(e){
//
var value = maxheight.value;
if(/^\d+$/.test(value)){
MAX_HEIGHT = parseInt(value);
}
e.preventDefault();
},true);
var btnsend = document.getElementById(“btnsend”);
btnsend.addEventListener(“click”, function(e){
//
sendImage();
},true);
};
window.addEventListener(“DOMContentLoaded”, function() {
//
init();
},false);
</script>
</head>
<body>
<div>
<h1>通过Canvas及File API缩放并上传图片</h1>
<p>从文件夹拖动一张照片到下方的盒子里, canvas 和
JavaScript将会自动的进行缩放.</p>
<div>
<input type=”text” id=”maxheight” value=”100″/>
<button id=”setheight”>设置图片最大高度</button>
<input type=”hidden” name=”action” value=”receive.jsp” />
</div>
<div id=”preview-row”>
<div id=”drop-target”
style=”width:400px;height:200px;min-height:100px;min-width:200px;background:#eee;cursor:pointer;”>拖动图片文件到这里…</div>
<div>
<div>
<button id=”btnsend”> 上 传 </button> <span id=”tip2″
style=”padding:8px 0;color:#f00;”></span>
</div>
</div>
<div><h4>缩略图:</h4></div>
<div id=”preview”
style=”background:#f4f4f4;width:400px;height:200px;min-height:100px;min-width:200px;”>
<canvas id=”myCanvas”></canvas>
</div>
</div>
</div>
</body>
</html>

服务端页面,receive.jsp

代码如下:

<%@ page language=”java” import=”java.util.*”
pageEncoding=”UTF-8″%>
<%@page import=”sun.misc.BASE64Decoder”%>
<%@page import=”java.io.*”%>
<%@page import=”org.springframework.web.util.UriComponents”%>
<%@page import=”java.net.URLDecoder”%>
<%!
// 本文件:/receive.jsp
// 图片存放路径
String photoPath = “D:/blog/upload/photo/”;
File photoPathFile = new File(photoPath);
// references:

private boolean saveImageToDisk(byte[] data,String imageName) throws
IOException{
int len = data.length;
//
// 写入到文件
FileOutputStream outputStream = new FileOutputStream(new
File(photoPathFile,imageName));
outputStream.write(data);
outputStream.flush();
outputStream.close();
//
return true;
}
private byte[] decode(String imageData) throws IOException{
BASE64Decoder decoder = new BASE64Decoder();
byte[] data = decoder.decodeBuffer(imageData);
for(int i=0;i<data.length;++i)
{
if(data[i]<0)
{
//调整异常数据
data[i]+=256;
}
}
//
return data;
}
%>
<%
String path = request.getContextPath();
String basePath =
request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;
%>
<%
//如果是IE,那么需要设置为text/html,否则会弹框下载
//response.setContentType(“text/html;charset=UTF-8”);
response.setContentType(“application/json;charset=UTF-8”);
//
String imageName = request.getParameter(“imagename”);
String imageData = request.getParameter(“imagedata”);
int success = 0;
String message = “”;
if(null == imageData || imageData.length() < 100){
// 数据太短,明显不合理
message = “上传失败,数据太短或不存在”;
} else {
// 去除开头不合理的数据
imageData = imageData.substring(30);
imageData = URLDecoder.decode(imageData,”UTF-8″);
//System.out.println(imageData);
byte[] data = decode(imageData);
int len = data.length;
int len2 = imageData.length();
if(null == imageName || imageName.length() < 1){
imageName = System.currentTimeMillis()+”.png”;
}
saveImageToDisk(data,imageName);
//
success = 1;
message = “上传成功,参数长度:”+len2+”字符,解析文件大小:”+len+”字节”;
}
// 后台打印
System.out.println(“message=”+message);
%>
{
“message”: “<%=message %>”,
“success”: <%=success %>
}