zoukankan      html  css  js  c++  java
  • html5保存图片

    基于HTML5 的,将图片和文件保存在localStorage 中

    林宝基 发布于 4个月前,共有 0 条评论

    发现了外国一个前端高手的GITHUB。

    https://github.com/robnyman/robnyman.github.com

    如题:

    原理是:先将 image 画在cavnas中,再将cavnas 中的数据 保存到本地  关键代码如下 
    elephant = document.getElementById("elephant");// 一个img 对象
    var imgCanvas = document.createElement("canvas"),
                    imgContext = imgCanvas.getContext("2d");
    
                // Make sure canvas is as big as the picture
                imgCanvas.width = elephant.width;
                imgCanvas.height = elephant.height;
    
                // Draw image into canvas element
                imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height);
    
                // Save image as a data URL
                storageFiles.elephant = imgCanvas.toDataURL("image/png");
    
    
                // Save as JSON in localStorage
                try {
                    localStorage.setItem("storageFiles", JSON.stringify(storageFiles));
                }
                catch (e) {
                        console.log("Storage failed: " + e);                
                }

    上html代码 :

    <div class="main">
                    <article class="main-content" role="main">                  
    
                        <h2>An elephant, with localStorage</h2>
    
                        <figure>
                            <img id="elephant" src="about:blank" >
                            <noscript>
                                <p><i>You need to have JavaScript enabled to save images in localStorage.</i></p>
                                <img src="elephant.png" alt="">
                            </noscript>    
                            <figcaption>A mighty big elephant, and mighty close too!</figcaption>
                        </figure>
    
                        
                        <h2>Rhino with XMLHttpRequest and reading file data</h2>
                        <figure>
                            <img id="rhino" src="about:blank" alt="A close up of a rhino">
                            <figcaption>Rhinos are big!</figcaption>
                        </figure>
    
                    </article>
                </div>
    上JS 代码
    (function () {
        // localStorage with image
        var storageFiles = JSON.parse(localStorage.getItem("storageFiles")) || {},
            elephant = document.getElementById("elephant"),
            storageFilesDate = storageFiles.date,
            date = new Date(),
            todaysDate = (date.getMonth() + 1).toString() + date.getDate().toString();
    
        // Compare date and create localStorage if it's not existing/too old   
        if (typeof storageFilesDate === "undefined" || storageFilesDate < todaysDate) {
            // Take action when the image has loaded
            elephant.addEventListener("load", function () {
                var imgCanvas = document.createElement("canvas"),
                    imgContext = imgCanvas.getContext("2d");
    
                // Make sure canvas is as big as the picture
                imgCanvas.width = elephant.width;
                imgCanvas.height = elephant.height;
    
                // Draw image into canvas element
                imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height);
    
                // Save image as a data URL
                storageFiles.elephant = imgCanvas.toDataURL("image/png");
    
                // Set date for localStorage
                storageFiles.date = todaysDate;
    
                // Save as JSON in localStorage
                try {
                    localStorage.setItem("storageFiles", JSON.stringify(storageFiles));
                }
                catch (e) {
                        console.log("Storage failed: " + e);                
                }
            }, false);
    
            // Set initial image src    
            elephant.setAttribute("src", "elephant.png");
        }
        else {
            // Use image from localStorage
            elephant.setAttribute("src", storageFiles.elephant);
        }
    
        // Getting a file through XMLHttpRequest as an arraybuffer and creating a Blob
        var rhinoStorage = localStorage.getItem("rhino"),
            rhino = document.getElementById("rhino");
        if (rhinoStorage) {
            // Reuse existing Data URL from localStorage
            rhino.setAttribute("src", rhinoStorage);
        }
        else {
            // Create XHR, BlobBuilder and FileReader objects
            var xhr = new XMLHttpRequest(),
                blob,
                fileReader = new FileReader();
    
            xhr.open("GET", "rhino.png", true);
            // Set the responseType to arraybuffer. "blob" is an option too, rendering BlobBuilder unnecessary, but the support for "blob" is not widespread enough yet
            xhr.responseType = "arraybuffer";
    
            xhr.addEventListener("load", function () {
                if (xhr.status === 200) {
                    // Create a blob from the response
                    blob = new Blob([xhr.response], {type: "image/png"});
    
                    // onload needed since Google Chrome doesn't support addEventListener for FileReader
                    fileReader.onload = function (evt) {
                        // Read out file contents as a Data URL
                        var result = evt.target.result;
                        // Set image src to Data URL
                        rhino.setAttribute("src", result);
                        // Store Data URL in localStorage
                        try {
                            localStorage.setItem("rhino", result);
                        }
                        catch (e) {
                            console.log("Storage failed: " + e);
                        }
                    };
                    // Load blob as Data URL
                    fileReader.readAsDataURL(blob);
                }
            }, false);
            // Send XHR
            xhr.send();
        }
    })();
  • 相关阅读:
    mac 10.15.7 修改PATH
    oc 属性类型一般用法
    ubuntu解压zip文件名乱码
    telnet 退出
    docker 根据容器创建镜像
    mac android adb device 没有显示设备
    Yii2 查看所有的别名 alias
    Yii2 App Advanced 添加 .gitignore
    ubuntu 18.04 搜狗突然就提示乱码
    An error occured while deploying the file. This probably means that the app contains ARM native code and your Genymotion device cannot run ARM instructions. You should either build your native code to
  • 原文地址:https://www.cnblogs.com/qqyuhaitao/p/3421692.html
Copyright © 2011-2022 走看看