将base64图像拆分为多个部分

时间:2014-08-23 15:19:09

标签: javascript jquery image split

我正在尝试将带有javascript或jquery的图像文件分成四个相等的部分。 是否可以将像280px x 60px这样的图像分成四个相等的部分,并将它们用base64编码保存为四个变量?

1 个答案:

答案 0 :(得分:5)

假设我们有一个Base64图像,如:

slice split cut image into parts using canvas, HTML5

让我们去拍摄这4张照片!

get image parts from whole image using Canvas, Javascript


  1. 创建内存画布元素并准备上下文
  2. var canvas = document.createElement('canvas');
    var ctx    = canvas.getContext("2d");
    

    1. 让我们准备一个空数组以便以后存储我们的base64字符串:
    2. var parts = [];
      

      1. 现在我们需要创建一个 new 图像,分配一个 onload 函数并设置它的 src :< / LI>

        var img = new Image();
        img.onload = split_4;
        img.src = "data:image/png;base64,iVBORw0KGgoAAAA.......................etc"
        

        1. split_4 功能
        2. 如果 slice 所需的图像 260×80 意味着我们需要将 canvas 元素设置为1/4那么大:

          var w2 = img.width  / 2,  // 130
              h2 = img.height / 2;  // 40
          
          canvas.width  = w2;
          canvas.height = h2;   
          

          1. 绘制我们的画布 4次,每次将图片移动到新的XY位置
          2. //      0   0    1.iteration
            //   -130   0    2.iteration
            //      0 -40    3.iteration
            //   -130 -40    4.iteration
            

            在每次循环迭代中,我们只需将检索到的Canvas数据推送到我们的parts数组中:

            for(var i=0; i<4; i++){
            
              var x = (-w2*i) % (w2*2),              // New X position
                  y = (h2*i)<=h2? 0 : -h2 ;          // New Y position
            
              ctx.drawImage(this, x, y, w2*2, h2*2); // imgObject, X, Y, width, height
              parts.push( canvas.toDataURL() );      // ("image/jpeg") for jpeg
            
            }
            

            现在总是在onload函数内部,您可以从数组中检索所有图像部分:

            console.log( parts ); //  ["data:image/png;base64,iV...z9d/oBHAAAAAElFTkSuQmCC",
                                  //   "data:image/png;base64,iV...yVhNNW1AAAAAElFTkSuQmCC", 
                                  //   "data:image/png;base64,iV...Q2FoAAAAABJRU5ErkJggg==", 
                                  //   "data:image/png;base64,iV...RQXgXQAAAAASUVORK5CYII="]
            

            仅获取(即)使用第一张图片:parts[0];


            实施例

            var canvas = document.createElement('canvas'), // In memory canvas
                ctx = canvas.getContext("2d"),
                parts = [], // to push into oud base64 strings
                img = new Image();
            
            function split_4() {
            
              var w2 = img.width  / 2,
                  h2 = img.height / 2;
            
              for (var i = 0; i < 4; i++) {
            
                var x = (-w2 * i) % (w2 * 2),
                  y = (h2 * i) <= h2 ? 0 : -h2;
            
                canvas.width = w2;
                canvas.height = h2;
            
                ctx.drawImage(this, x, y, w2 * 2, h2 * 2); // img, x, y, w, h
                parts.push(canvas.toDataURL()); // ("image/jpeg") for jpeg
            
                //>> JUST FOR DEMO
                var slicedImage = document.createElement("img")
                slicedImage.src = parts[i];
                var div = document.getElementById("test");
                div.appendChild(slicedImage);
                //<< JUST FOR DEMO
              }
              console.log(parts);
            };
            
            img.onload = split_4;
            img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQQAAABQCAYAAAD/YAtfAAAD6klEQVR4nO3c6Y0jIRCGYWdCKIRCKIRCKIRCKLU/dlxdzdDQF7ZHfkt6pB3uktbfzmqPhzxEAEAeIo93PwDA5yAQACgCAYAiEAAoAgGAIhAAKAIBgCIQACgCAYAiEAAoAgGAIhAAKAIBgCIQACgCAYAiEAAoAgGAIhAAKAIBgCIQACgCAYAiEAAoAgGAIhAAKAIBgCIQACgCAYAiEAAoAgGAIhAAKAJhJiciSUSK/K8iIuHA/vRzxrv7OMOLSJal8s/Yu9+FLgJhFidLENSVduxPZn0YrI2yDp345t7DRt+jXj6tjy9EIMxSZKki6w+4yPiDYfe6ztos7Spv6ttX70iN3v0f6ONLEQgzBFkq7xi3vKzLd+5JZl2R9W9PRPZ9J3I3+6ZoxmPnXZ/Yx5ciEGbwsvyEdtWcrdbebOZj5w5XneUG46/y7Lu+276r/IE+vhSBMJOvvnayrnp9MHN5cLZdm6q5ZObCi3vu9dea+9Q+vhSB8EpBliqN+WLm/eCsZNaGzj1px7tsZTOeq7k9Pdo9tge/ccedfeAyAuFVnKw/8LGaj2Yuyf8PkO+cZ89yjbueVXa8rS63Mb6nz2DW55+znKyDIkzqA5cRCK+SZV2umi9mzv44N9bW6+t5V501eluU3x/YUL0hHug1ynbV59zZBy4jEF4hyrpiNe+lX7lxpq3WnaP5mqvuS+Zrd7BfJ+0/RsyNs+7uA5cQCLN5WVdurInVmiTjv7dgq3XvaL6lvvP5lqM9l6rfbL4uL+gDpxEIsxVZl2usyWY+mfFkxnO1x1br3tF8i5Pf1XpvT9jRS5zcB04jEGaKsq6wsa6YNd6MezNeOntcNec6+0ay2ZtP9Gz3b/Viz53VB04hEGZxsq7UWWtr71wx465zd7nw5tbZI0d7mdEHTiMQZkmyVBmstbV3zp4fqrlg5tKBN0f5XfFg30d7mdEHTiMQZrHlB2vLxlpvxku1J5q5VM0lMxd3vteZPVnW3/q7A30f7eXuPnAJgTBDkKXyjvXJrE87xh9y/78BiGZPqHqIB3q352z1Ys+7uw9cQiDMkGWpLMsfI1rRrHeyrizjv8j0kPv+lWCs7nqO26rfvOVML3f1gcsIhBn2lt0TOuti566ysafI/l9VbSUzngZv3tLrJUzsA5cRCDMU2Vf1Pi/n/tuxaO4scvy/XrNl7/M73rzlTC9X+8BlBAIARSAAUAQCAEUgAFAEAgBFIABQBAIARSAAUAQCAEUgAFAEAgBFIABQBAIARSAAUAQCAEUgAFAEAgBFIABQBAIARSAAUAQCAEUgAFAEAgBFIABQBAIARSAAUAQCAEUgAFAEAgD1DxOuXDVQeFT8AAAAAElFTkSuQmCC";
            img {
              margin: 10px;
            }
            <div id="test"></div>