用html5或js功能或css实现特定方框内图像保存为图片功能。

Question

无论使用保存还是截图的功能，只要能通过点击按钮就能实现将特定方框内的图像（可以是两张图片叠在一起，或者给图片画一些东西）全部保存为一张图片的形式就可以。（这是在自己本地内使用，不是放到网站上）。听说是用window.location.href = "image/octet-stream" + data的方法，可是不懂。所以求教高手，大神们帮帮忙。最好就是给个附上代码。并且稍微解释一下。在这小弟万分感谢。（注。必须使用html5，js或jquery这些实现）。。。

Answer 1

无法实现。
window.location.href = "image/octet-stream"仅仅是用来将获取的图片数据在新窗口打开，浏览器就会自动提示下载。
可问题是image的数据从哪儿来？HTML5里面的Canvas支持象素级操作，可以获取图像数据，但一个网页不是一张图片，它是有许多的DOM和样式渲染而成，在JS中是无法将其转换成一张图片的，除非浏览器提供相关API，但目前并没有浏览器提供了类似的API，因此暂时无法实现。
你看现在所有的截图，要么是浏览器自带的，要么就要安装插件。

追问

那么你的意思就是说无法实现保存图片的功能。那么（假设）如果我是用html5。css。js等做一个软件，那么我能不能实现我说的这个功能呢？还有，那些用html5做的画图网站又是怎么实现图像保存的呢。请教。。。感谢

追答

1. 你用HTML5、CSS和JS做什么软件，都不能实现这个效果，除非浏览器给你提供API。
2. 那些用HTML5做的画画软件，实际上就是在一个画布（Canvas）上进行绘画的，Canvas中的图像数据时可以获取的，上面已经提到了，因此可以保存为图片。而网页不一样，Canvas只是HTML中的一个标签，而一个网页包含了许多许多标签，除了Canvas，它们都无法将内容存为图片。

当然，如果你真要做成这样，你可以把整个网站都用Canvas来绘制，不过这样很复杂，特别是有一些效果和用户交互的话，且只支持HTML5的浏览器。

追问

不好意思。麻烦您了。再问一个问题。我会追加分数的。
你说canvas可以获取图像数据，其实我就只需要保存那个画布里的图像。那么我能不能把Canvas就设置一个特定的大小（譬如半个屏幕大小），接着用几张图片覆盖在画布上面，那么我就直接保存那个画布方框里的图像。这个可以吗？
你说必须得api，那么请问如果用phonegap或者什么html5手机开发软件里，有这些保存图像的sdk吗？？？再次感谢。

追答

canvas是可以设置大小的，你可以想象其实canvas就像是windows里面的画图工具，你可以在里面画任何的图片、文字，并进行象素级操作。就像上面说的，你可以整个页面就用一个canvas，所有东西放到里面，想怎么截图就可以怎么截图，想要什么效果都可以实现，不过这样开发起来会比较困难，且仅支持HTML5的浏览器可以运行。
Phonegap里面是没有提供保存为图像的API的，不过如果你是在终端上面使用，那就好说了，因为你可以修改Phonegap的源码，或者自己开发一个WebView，提供一些保存为图片的API。