怎么保存网上的HLML5图片?

html-css018

怎么保存网上的HLML5图片?,第1张

HTML5

的图片还是可以保存的-

-

比如你用的是某webkit内核的浏览器,所以只要在页面右键——

审查元素

——资源,然后在左边栏找该页面中的图片即可,不懂可以追问

首先你canvas已经有图了

然后通过ajax发给后台 然后后台做保存

js:

    var data = _canvas.toDataURL() 

    //删除字符串前的提示信息 "data:image/pngbase64,"  

    var b64 = data.substring(22)  

  

    $.ajax({ url: "RotateCanvas.aspx", data: { data: b64, name: i.toString() }, success:  

            function ()  

            {  

              alert('OK')  

            }  

    })

java:

if (Request["name"] != null)  

{  

    string name = Request["name"]  

    String savePath = Server.MapPath("~/images/output/")  

  

    try  

    {  

        FileStream fs = File.Create(savePath + "/" + name + ".png")  

        byte[] bytes = Convert.FromBase64String(Request["data"])  

  

        fs.Write(bytes, 0, bytes.Length)  

        fs.Close()  

    }  

    catch (Exception ex)  

    {  

    }  

}

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/pngbase64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABbSURBVDhPY8AFMvJL/oMwlEs8yMgvJVcjyMbSYaERogCC0/OAGIkPwaVQMUhgQWiggWANIAzUhKoBpgjdMIhBUHsxAdxkUgHMBiiXeDAQNkICAsolHuC3kYEBAG/wdxC2W2tUAAAAAElFTkSuQmCC

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

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