zoukankan      html  css  js  c++  java
  • Base64 image

    【前端攻略】:玩转图片Base64编码

    什么是 base64 编码?  

    我不是来讲概念的,直接切入正题,图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。

    这样做有什么意义呢?我们知道,我们所看到的网页上的每一个图片,都是需要消耗一个 http 请求下载而来的(所有才有了 csssprites 技术的应运而生,但是 csssprites 有自身的局限性,下文会提到)。

    没错,不管如何,图片的下载始终都要向服务器发出请求,要是图片的下载不用向服务器发出请求,而可以随着 HTML 的下载同时下载到本地那就太好了,而 base64 正好能解决这个问题。

     http://www.cnblogs.com/coco1s/p/4375774.html


     

    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

    在html中的使用

    <img src='data:image/gif;base64,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'/> <br />

    效果:

    法1:

            ByteArrayOutputStream output = new ByteArrayOutputStream();
            RenderedImage image = producer.createImage(imageCode);
            ImageIO.write(image, "PNG", output);
            return DatatypeConverter.printBase64Binary(output.toByteArray());

    法2:

    import org.apache.commons.codec.binary.Base64;
    import org.apache.commons.imaging.*;
    import org.apache.commons.io.FileUtils;
    
    import java.awt.*;
    import java.awt.image.BufferedImage;
    import java.io.File;
    import java.io.IOException;
    import java.util.HashMap;
    import java.util.Map;
    
    public class Base64Image {
        public static String getBase64(String path) throws IOException {
            byte[] bytes = FileUtils.readFileToByteArray(new File(path));
            String base64String = Base64.encodeBase64String(bytes);
            return base64String;
    
        }
    
        public static void getImage(String base64,String outPath) throws IOException, ImageReadException, ImageWriteException {
            if (base64!=null&&!"".equals(base64)){
                int i = base64.lastIndexOf(",");
                if (i>=0){
                    base64=base64.substring(i+1);
                }
                byte[] bytes = Base64.decodeBase64(base64);
    
                BufferedImage bufferedImage = Imaging.getBufferedImage(bytes);
                Map<String, Object> params = new HashMap<String,Object>();
    
                Imaging.writeImage(bufferedImage,new File(outPath), ImageFormats.BMP, params);
    
            }
        }
    }

    https://github.com/xuejike/Base64Image/blob/6b31d9931019184f0efcc6e3d9009f0d94d374ee/src/main/java/com/bidanet/image/Base64Image.java



    法3
    II. Java 8 Encode an Image to Base64

    public static String encoder(String imagePath) {
        String base64Image = "";
        File file = new File(imagePath);
        try (FileInputStream imageInFile = new FileInputStream(file)) {
            // Reading a Image file from file system
            byte imageData[] = new byte[(int) file.length()];
            imageInFile.read(imageData);
            base64Image = Base64.getEncoder().encodeToString(imageData);
        } catch (FileNotFoundException e) {
            System.out.println("Image not found" + e);
        } catch (IOException ioe) {
            System.out.println("Exception while reading the Image " + ioe);
        }
        return base64Image;
    }

    III. Java 8 Decode an Base64 String to an Image

    public static void decoder(String base64Image, String pathFile) {
        try (FileOutputStream imageOutFile = new FileOutputStream(pathFile)) {
            // Converting a Base64 String into Image byte array
            byte[] imageByteArray = Base64.getDecoder().decode(base64Image);
            imageOutFile.write(imageByteArray);
        } catch (FileNotFoundException e) {
            System.out.println("Image not found" + e);
        } catch (IOException ioe) {
            System.out.println("Exception while reading the Image " + ioe);
        }
    }

    http://javasampleapproach.com/java/java-advanced/java-8-encode-decode-an-image-base64

    http://javasampleapproach.com/java-integration/transfer-image-restfulapi-image-restfulapi
    convert image to base64 with java
    https://stackoverflow.com/questions/28268511/convert-image-to-base64-with-java




    页面以base64输出图片http://www.cnblogs.com/LittleMing/p/4882366.html


    JavaWeb: 搞定验证码
    http://www.jianshu.com/p/9284a31e6ce8

    import sun.misc.BASE64Decoder;
    import sun.misc.BASE64Encoder;
    
    import javax.imageio.ImageIO;
    import javax.imageio.stream.FileImageOutputStream;
    import java.awt.*;
    import java.awt.image.BufferedImage;
    import java.io.*;
    import java.util.Random;
    
    
    /**
    
     * 生成随机数字或字母串,以图像方式显示,用于人工识别,使程序很难识别。
    
     * 减小系统被程序自动攻击的可能性。
    
     * 生成的图形颜色由红、黑、蓝、紫4中随机组合而成,数字或字母垂直方向位置在
    
     * 一定范围内也是随机的,减少被程序自动识别的几率。
    
     * 由于数字的0,1,2易和字母的o,l,z混淆,使人眼难以识别,因此不生成数字和字母的混合串。
    
     * 生成的串字母统一用小写,串的最大长度为16。
    
     *
    
     */
    
    public class RandomGraphic {
    
    //字符的高度和宽度,单位为像素
    
        private int wordHeight = 10;
    
        private int wordWidth = 15;
    
    //字符大小
    
        private int fontSize = 16;
    
    //最大字符串个数
    
        private  static final int MAX_CHARCOUNT = 16;
    
    
    
    //垂直方向起始位置
    
        private final int initypos = 5;
    
    
    
    //要生成的字符个数,由工厂方法得到
    
        private int charCount = 0;
    
    
    
    //颜色数组,绘制字串时随机选择一个
    
        private static final Color[] CHAR_COLOR = {Color.RED,Color.BLUE,Color.MAGENTA,Color.blue};
    
    
    
    //随机数生成器
    
        private Random r = new Random();
    
    
    
        /**
    
         * 生成图像的格式常量,JPEG格式,生成为文件时扩展名为.jpg;
    
         * 输出到页面时需要设置MIME type 为image/jpeg
    
         */
    
        public static String GRAPHIC_JPEG = "JPEG";
    
        /**
    
         * 生成图像的格式常量,PNG格式,生成为文件时扩展名为.png;
    
         * 输出到页面时需要设置MIME type 为image/png
    
         */
    
        public static String GRAPHIC_PNG = "PNG";
    
    
    
    //用工厂方法创建对象
    
        protected RandomGraphic(int charCount){
    
            this.charCount = charCount;
    
        }
    
    
    
        /**
    
         * 创建对象的工厂方法
    
         * @param charCount 要生成的字符个数,个数在1到16之间
    
         * @return 返回RandomGraphic对象实例
    
         * @throws Exception 参数charCount错误时抛出
    
         */
    
        public static RandomGraphic createInstance(int charCount) throws Exception{
    
            if (charCount < 1 || charCount > MAX_CHARCOUNT){
    
                throw new Exception("Invalid parameter charCount,charCount should between in 1 and 16");
    
            }
    
            return new RandomGraphic(charCount);
    
        }
    
    
    
        /**
    
         *  随机生成一个数字串,并以图像方式绘制,绘制结果输出到流out中
    
         * @param graphicFormat 设置生成的图像格式,值为GRAPHIC_JPEG或GRAPHIC_PNG
    
         * @param out 图像结果输出流
    
         * @return 随机生成的串的值
    
         * @throws IOException
    
         */
    
        public String drawNumber(String graphicFormat,OutputStream out) throws IOException{
    
    // 随机生成的串的值
    
            String charValue = "";
    
            /*charValue = randNumber();*/
            charValue = randAlphaStr(4);
            return draw(charValue,graphicFormat,out);
    
        }
    
    
    
        /**
    
         * 随机生成一个字母串,并以图像方式绘制,绘制结果输出到流out中
    
         * @param graphicFormat 设置生成的图像格式,值为GRAPHIC_JPEG或GRAPHIC_PNG
    
         * @param out 图像结果输出流
    
         * @return 随机生成的串的值
    
         * @throws IOException
    
         */
    
        public String drawAlpha(String graphicFormat,OutputStream out) throws IOException{
    
    //  随机生成的串的值
    
            String charValue = "";
    
            charValue = randAlphaStr(4);
    
            return draw(charValue,graphicFormat,out);
    
        }
        // 给定范围获得随机颜色
        Color getRandColor(int fc, int bc) {
            Random random = new Random();
            if (fc > 255) {
                fc = 255;
            }
            if (bc > 255) {
                bc = 255;
            }
            int r = fc + random.nextInt(bc - fc);
            int g = fc + random.nextInt(bc - fc);
            int b = fc + random.nextInt(bc - fc);
            return new Color(r, g, b);
        }
    
    
        /**
    
         * 以图像方式绘制字符串,绘制结果输出到流out中
    
         * @param charValue 要绘制的字符串
    
         * @param graphicFormat 设置生成的图像格式,值为GRAPHIC_JPEG或GRAPHIC_PNG
    
         * @param out 图像结果输出流
    
         * @return 随机生成的串的值
    
         * @throws IOException
    
         */
    
        protected String draw(String charValue,String graphicFormat,OutputStream out) throws IOException{
            int width = (charCount+2) * wordWidth;
            int height = wordHeight * 3;
            BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
            // 创建一个随机数生成器类。
            Random random = new Random();
            // 获取图形上下文
            Graphics g = image.getGraphics();
            // 设定背景色
            g.setColor(getColor(100));
            g.fillRect(0, 0, width, height);
            // 设定字体
            g.setFont(new Font("宋体", Font.BOLD, 18));
            // 随机产生155条干扰线,使图象中的认证码不易被其它程序探测到
            g.setColor(getRandColor(160, 200));
            for (int i = 0; i < 155; i++) {
                int x = random.nextInt(width);
                int y = random.nextInt(height);
                int xl = random.nextInt(12);
                int yl = random.nextInt(12);
                g.setColor(getColor(25));
                g.drawLine(x, y, x + xl, y + yl);
            }
            // 绘制charValue,每个字符颜色随机
            for(int i = 0; i < charCount; i++){
                String c = charValue.substring(i,i+1);
                Color color =  CHAR_COLOR[randomInt(0,CHAR_COLOR.length)];
                g.setColor(color);
                int xpos = (i+1) * wordWidth;
                // 垂直方向上随机
                int ypos = randomInt(initypos+wordHeight,initypos+wordHeight*2);
                g.drawString(c,xpos,ypos);
            }
    
            g.dispose();
            image.flush();
            // 输出到流
            ImageIO.write(image,graphicFormat,out);
            return charValue;
        }
        /*** 随机返回一种颜色,透明度0~255 0表示全透
         * @return 随机返回一种颜色
         * @param alpha 透明度0~255 0表示全透
         */
        private Color getColor(int alpha)
        {
            int R=(int) (Math.random()*255);
            int G=(int) (Math.random()*255);
            int B=(int) (Math.random()*255);
            return new Color(R,G,B,alpha);
        }
        public String drawInputstr(int num,String graphicFormat,OutputStream out) throws IOException{
            String charValue = randAlphaStr(num);
            int width = (charCount+2) * wordWidth;
            int height = wordHeight * 3;
            BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
            ByteArrayOutputStream byteOut = new ByteArrayOutputStream();
            // 创建一个随机数生成器类。
            Random random = new Random();
            // 获取图形上下文
            Graphics g = image.getGraphics();
            // 设定背景色
            g.setColor(getColor(80));
            g.fillRect(0, 0, width, height);
            //设置干扰点
            CreateRandomPoint(width, height,50,g,255);
            // 设定字体
            g.setFont(new Font("宋体", Font.BOLD, 18));
            // 随机产生155条干扰线,使图象中的认证码不易被其它程序探测到
            g.setColor(getRandColor(160, 200));
            for (int i = 0; i < 135; i++) {
                int x = random.nextInt(width);
                int y = random.nextInt(height);
                int xl = random.nextInt(12);
                int yl = random.nextInt(12);
                g.setColor(getColor(200));
                g.drawLine(x, y, x + xl, y + yl);
            }
            // 绘制charValue,每个字符颜色随机
            for(int i = 0; i < charCount; i++){
                String c = charValue.substring(i,i+1);
                Color color =  CHAR_COLOR[randomInt(0,CHAR_COLOR.length)];
                g.setColor(color);
                int xpos = (i+1) * wordWidth;
                // 垂直方向上随机
                int ypos = randomInt(initypos+wordHeight,initypos+wordHeight*2);
                g.drawString(c,xpos,ypos);
            }
    
            g.dispose();
            image.flush();
            // 输出到流
            ImageIO.write( image, graphicFormat, out);
            return charValue;
        }
    // 生成随机数字串
    
        protected String randNumber(){
    
            String charValue = "";
    
            for (int i = 0; i < charCount; i++){
    
                charValue += String.valueOf(randomInt(0,10));
    
            }
    
            return charValue;
    
        }
    
    
    
    // 生成随机字母串
    
        private String randAlpha(){
    
            String charValue = "";
    
            for (int i = 0; i < charCount; i++){
    
                char c = (char) (randomInt(0,26)+'a');
    
                charValue += String.valueOf(c);
    
            }
    
            return charValue;
    
        }
    // 生成随机字符串
    
        private String randAlphaStr(int num){
    
            StringBuffer charValue = new StringBuffer();
            String str="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
            Random random=new Random();
            StringBuffer sb=new StringBuffer();
            for(int i=0;i<num;i++){
                int number=random.nextInt(62);
                charValue.append(str.charAt(number));
            }
            return charValue.toString();
        }
    
    
        /**
    
         * 返回[from,to)之间的一个随机整数
    
         * @param from 起始值
    
         * @param to 结束值
    
         * @return [from,to)之间的一个随机整数
    
         */
    
        protected int randomInt(int from,int to){
    
            return from+r.nextInt(to-from);
    
        }
    
        /**
         * 随机产生干扰点
         * @param width
         * @param height
         * @param many
         * @param g
         * @param alpha 透明度0~255 0表示全透
         */
        private void CreateRandomPoint(int width,int height,int many,Graphics g,int alpha)
        {  // 随机产生干扰点
            Random random = new Random();
            for (int i=0;i<many;i++) {
                int x = random.nextInt(width);
                int y = random.nextInt(height);
                g.setColor(getColor(alpha));
                g.drawOval(x,y,random.nextInt(3),random.nextInt(3));
            }
        }
    
    
    
        public static void main(String[] args) throws FileNotFoundException, IOException, Exception {
    
    // TODO Auto-generated method stub
            ByteArrayOutputStream output = new ByteArrayOutputStream();
            String str = RandomGraphic.createInstance(4).drawInputstr(4,RandomGraphic.GRAPHIC_PNG,output);
            System.out.println("----------------str:"+str);
            byte[] captcha = output.toByteArray();
            BASE64Encoder encoder = new BASE64Encoder();
    
            String imagestr =  encoder.encode(captcha);// 返回Base64编码过的字节数组字符串
            System.out.println("----------------:"+imagestr);
            System.out.println("----------------:"+captcha.toString());
            String path = "D:/myimg.png";
            String path2 = "D:/myimg2.png";
            byte[] data = captcha;
            if(data.length<3||path.equals("")) return;
            try{
                FileImageOutputStream imageOutput = new FileImageOutputStream(new File(path));
                imageOutput.write(data, 0, data.length);
                imageOutput.close();
                System.out.println("Make Picture success,Please find image in " + path);
            } catch(Exception ex) {
                System.out.println("Exception: " + ex);
                ex.printStackTrace();
            }
    
            BASE64Decoder decoder = new BASE64Decoder();
            try {
                // Base64解码
                byte[] bytes = decoder.decodeBuffer(imagestr);
                for (int i = 0; i < bytes.length; ++i) {
                    if (bytes[i] < 0) {// 调整异常数据
                        bytes[i] += 256;
                    }
                }
                // 生成jpeg图片
                OutputStream out = new FileOutputStream(path2);
                out.write(bytes);
                out.flush();
                out.close();
    
            } catch (Exception e) {
    
            }
          //
           // System.out.println(RandomGraphic.createInstance(4).drawAlpha(RandomGraphic.GRAPHIC_JPEG,new FileOutputStream("D:/myimg2.png")));
    
        }

    上一篇介绍中,我们将二进制文件(BLOB)保存为Base64编码的文本,这些文本可以内嵌在XML的标签中,因此二进制信息它可以随着XML文件被拷贝、下载而不用担心信息会缺失。这项技术也在email邮件中被广泛使用。 

    浏览器对Base64的支持 
    图像是最经常被使用的一种二进制文件。而现代的浏览器的进步日新月异,IE7,FireFox和其他浏览器为包括Base64在内各种编码的图像信息提供了很好的支持。因此图形信息可以以下面的形式呈现在页面中、 

    Java代码  收藏代码
    1. <img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////  
    2. wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML  
    3. wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="  
    4. alt="Base64 encoded image" width="150" height="150"/>  



    这种data: URI的格式能把Base64(或其他数据)可以内嵌在image标签的属性当中(或者CSS中)。我们可以看到在大部分浏览器中的显示效果: 
     

    这种做法有利有弊,好处是浏览器可以在一个连接中得到完成的页面内容,不好的地方时图像的大小会增加1/3。因此,这种内嵌的方法适合对小的图形元素比如图标、圆角等等进行处理,从而减少浏览器打开的连接数,但对大的照片、图片(量少而大)等等则不应该使用Base64编码以免影响下载速度。 

    为了得到刚才的Base64编码,我们将上一篇的Java修改成Struts Action,并借用了JIMI进行图形的读取和格式转换,Base64编码器则改为更普遍的Apache Commons组件,代码如下: 

    Java代码  收藏代码
    1. public class Base64ImageAction extends ActionSupport {  
    2.   
    3.     private final static String galleryName = "gallery";  
    4.     private static String parent = null;  
    5.          private String encodeString = null;  
    6.   
    7.     public String getEncodeString() {  
    8.         return encodeString;  
    9.     }  
    10.   
    11.     public void setEncodeString(String encodeString) {  
    12.         this.encodeString = encodeString;  
    13.     }  
    14.   
    15.   
    16.     private String getImageFullPath() {  
    17.         parent = new File(this.getClass().getClassLoader().getResource(  
    18.                     File.separator).getPath()).getParent()+File.separator+"flag.jpg";  
    19.     }  
    20.   
    21.     public String execute() {  
    22.         ByteArrayOutputStream output = new ByteArrayOutputStream();  
    23.         try {  
    24.             JimiReader reader = Jimi.createJimiReader(this.getImageFullPath());  
    25.             Image image = reader.getImage();  
    26.             Jimi.putImage("image/png", image, output);  
    27.             output.flush();  
    28.             output.close();  
    29.             this.encodeString = Base64.encodeBase64String(output.toByteArray());  
    30.         } catch (IOException e) {  
    31.             e.printStackTrace();  
    32.         } catch (JimiException e) {  
    33.             e.printStackTrace();  
    34.         }  
    35.       
    36.         return SUCCESS;  
    37.     }  
    38. }  


    对应的View端是个十分简单的Freemarker模板: 

    Html代码  收藏代码
    1. <html>  
    2. <head>  
    3. <title>Hello,World</title>  
    4. </head>  
    5. <body>  
    6. <img src="data:image/png;base64,${encodeString}" />  
    7. </body>  
    8. </html>  



    处理古代浏览器 
    世界总是不是那么完美,尽管大部分现代浏览器对Base64的处理都十分完善,但是我们不能不考虑到一些“古老”的浏览器,而现在还是普遍使用的“古老”的浏览器,就当属IE6,在IE6里试图浏览上面的图片可能会得到一个红叉叉。我们不得不为IE6做一些特殊处理,利用下面的javascript,我们把Base64字串传回服务器端,重新解析成图片 

    Javascript代码  收藏代码
    1. // a regular expression to test for Base64 data  
    2. var BASE64_DATA = /^data:.*;base64/i;  
    3. // path to the PHP module that will decode the encoded data  
    4. var base64Path = "/my/path/base64.php";  
    5. function fixBase64(img) {  
    6.   // check the image source  
    7.   if (BASE64_DATA.test(img.src)) {  
    8.     // pass the data to the PHP routine  
    9.     img.src = base64Path + "?" + img.src.slice(5);  
    10.   }  
    11. };  
    12. // fix images on page load  
    13. onload = function() {  
    14.   for (var i = 0; i < document.images.length; i++) {  
    15.     fixBase64(document.images[i]);  
    16.   }  
    17. };  


    服务器端的Struts可以参考上面的例子做反向操作,具体从略。 

    更完美的方法 
    将Base64传回服务器解码是不错的IE6补丁,但是违背了我们的初衷,对IE6来说,浏览器连接数并未有任何减少。更直接的想法,是否能用Javascript直接在浏览器中,对Base64文本进行解码呢?我们构思的场景如下:服务器端先将图片转换成PNG格式以方便客户端进行处理,Base64编码之后,利用JSON将文本传递给浏览器客户端进行处理。 

    我们选择PNG图形格式是因为PNG已经俨然成为新的Web图形标准,它格式非常简单,可以很方便的用javascript进行处理而不需要借助浏览器的支持。我们知道javascript直接不能处理二进制数据,但是现在这不是个问题,服务器端已经准备好了Base64编码的文本数据,现在我们只需要一个javascript的Base64解析器,你可以在这里找到一个notmasteryet的Base64解析器。 

    现在PNG图形格式采用了DEFLATE作为唯一的压缩算法,该算法也广泛应用在ZIP,GZIP等压缩格式中。PNG图像格式文件(或者称为数据流)由一个8字节的PNG文件署名(PNG file signature)域和按照特定结构组织的3个以上的数据块(chunk)组成。 

    PNG定义了两种类型的数据块,一种是称为关键数据块(critical chunk),这是标准的数据块,另一种叫做辅助数据块(ancillary chunks),这是可选的数据块。关键数据块定义了4个标准数据块,其中图像数据块IDAT(image data chunk):它存储实际的数据, PNG总的数据流采用DEFLAT进行压缩。此外还擦用三角过滤“delta filters”来过滤每一行的像素的未压缩数据。DEFLAT和delta压缩在其他数据和文本处理中也被广泛应用。PNG格式你可以参考<a href="http://www.libpng.org/pub/png/spec/1.1/PNG-Contents.html">官方文档</a>。 

    很棒的,notmasteryet也为我们提供了一个DEFLAT解压器。 

    最后,我们把这些组合起来: 

    Html代码  收藏代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2.   
    3. <html xmlns="http://www.w3.org/1999/xhtml">  
    4. <head>  
    5.     <title>Demo JavaScript PNG Viewer</title>  
    6.  </head>  
    7. <body onload="show(gravatar);">  
    8. <script src="../Source/Base64.js" type="text/javascript"></script>  
    9. <script src="../Source/Deflate.js" type="text/javascript"></script>  
    10. <script src="../Source/PNG.js" type="text/javascript"></script>  
    11.   
    12. <script type="text/javascript">  
    13. var gravatar = 'iVBORw0KGgoAAAANSUhEUgAAA.......数据从略......55CYII=';  
    14. String.prototype.padRight = function(c, n){  
    15.     var txt = '';  
    16.     for(var i=0;i<n-this.length;i++) txt += c;  
    17.     return txt + this;  
    18. };  
    19. function show(data){  
    20.     var png = new PNG(data);  
    21.     var img = document.getElementById('image'), limg = document.getElementById('largeimage');  
    22.     document.getElementById('nativeimage').src = 'data:image/png;base64,' + data;  
    23.     img.innerHTML = '';  
    24.     limg.innerHTML = '';  
    25.     img.style.width = png.width + 'px';  
    26.     img.style.height = png.height + 'px';  
    27.     limg.style.width = (png.width * 3) + 'px';  
    28.     limg.style.width = (png.height * 3) + 'px';  
    29.     var line;  
    30.     while(line = png.readLine())  
    31.     {  
    32.         for (var x = 0; x line.length; x++){  
    33.             var px = document.createElement('div'), px2 = document.createElement('div');  
    34.             px.className = px2.className = 'pixel';  
    35.             px.style.backgroundColor = px2.style.backgroundColor = '#' + line[x].toString(16).padRight('0', 6);  
    36.             img.appendChild(px);  
    37.             limg.appendChild(px2);  
    38.         }  
    39.     }  
    40. }  
    41. </script>  
    42. <div id="image"></div>  
    43. <div id="largeimage"></div>  
    44. <img id="nativeimage" />  
    45. </body>  
    46. </html>  



    相关的javascript请到blogs.ejb.cc下载。 

    还可以更完美 
    回顾上一篇的例子,我们用了ihard.net提供了Base64编码,它提供一个GZIP编码参数,你可以发现如此编码之后的文本大小和原来的图形大小相差无几。利用上一节提供了javascript是不是可以解决Base64编码后文件大小增加的问题?留着思考吧。 

     http://blog.csdn.net/elf8848/article/details/39927385
     
     
  • 相关阅读:
    微信公众号,图片预览功能 有单个图片,
    MUI
    MUI学习01-顶部导航栏
    php验证18位身份证,准到必须输入正确的身份证号,
    微信sdk 图片上传 两种方法 上传一张显示一张 并附带微信图片放大功能和删除功能
    jQuery实现限制input框 textarea文本框输入字符数量的方法
    js jq 手机号实现(344) 附带删除功能 jq 实现银行卡没四个数加一个空格 附带删除功能
    山东省2016acm省赛
    East Central North America Region 2015
    North America Qualifier (2015)
  • 原文地址:https://www.cnblogs.com/softidea/p/7531313.html
Copyright © 2011-2022 走看看