megapix-image.js使用的一个坑-ios图片裁剪之画布绘制大图片

最新推荐文章于 2024-04-24 11:35:31 发布

码农下的天桥

最新推荐文章于 2024-04-24 11:35:31 发布

阅读量6.3k

点赞数

分类专栏：前端文章标签： ios 图片 canvas 裁剪 ios尺寸限制

本文链接：https://blog.csdn.net/cdnight/article/details/48265767

版权

前端专栏收录该内容

243 篇文章 2 订阅

订阅专栏

推荐

这一篇文章是早年为了解决图片裁剪的探索性文章，现在已经开放出了falsh版及html5版本的图片裁剪插件，各位有时间可以看看：
浮士德html5图片裁剪器2016开源版
 浮士德头像裁剪flash版2016福利版
上面两个解决方案已经经过多个项目的成功应用，适用于低级浏览器及现代浏览器，ipad，android，iphone4s，iphone5，iphone5s，iphone6等设备等。

【前言】
假如小伙伴尝试过在ios上做图片裁剪然后必然会遇到，ios上面的拍照的图片放到canvas上面没办法正常显示出来的问题，大家在搜索的时候必然会知道ios-imagefile-megapixel
这个项目。
【使用方式】
大家看到例子是这样子的：
html内容

<!DOCTYPE html>
<html>
  <head>
    <title>megapix-image.js test</title>
    <meta charset="utf-8">
    <script src="../src/megapix-image.js"></script>
    <script src="./megapix-image.test.js"></script>
  </head>
  <body>
    Select MegaPixel Photo: <input type="file" id="fileInput">
    <br/>
    Image: <br/>
    <img id="resultImage">
    <br/>
    Canvas:<br/>
    <canvas id="resultCanvas1"></canvas>
    <br/>
    Canvas (rotated):<br/>
    <canvas id="resultCanvas2"></canvas>
  </body>
</html>

脚本内容

window.onload = function() {
  var fileInput = document.getElementById('fileInput');
  fileInput.onchange = function() {
    var file = fileInput.files[0];
    // MegaPixImage constructor accepts File/Blob object.
    var mpImg = new MegaPixImage(file);

    // Render resized image into image element using quality option.
    // Quality option is valid when rendering into image element.
    var resImg = document.getElementById('resultImage');
    mpImg.render(resImg, { maxWidth: 300, maxHeight: 300, quality: 0.5 });

    // Render resized image into canvas element.
    var resCanvas1 = document.getElementById('resultCanvas1');
    mpImg.render(resCanvas1, { maxWidth: 300, maxHeight: 300 });

    // Render resized image into canvas element, rotating orientation = 6 (90 deg rotate right)
    // Types of orientation is defined in EXIF specification.
    // To detect orientation of JPEG file in JS, you can use exif.js from https://github.com/jseidelin/exif-js
    var resCanvas2 = document.getElementById('resultCanvas2');
    mpImg.render(resCanvas2, { maxWidth: 300, maxHeight: 300, orientation: 6 });
  };
};

效果如下：
这里写图片描述

这是官方例子，官方使用的maxWidth及maxHeight是300.
【引用】
于是你兴冲冲地采用这种方式，先读取文件的base64字符串，然后新建图片对象获取图片原始尺寸譬如原始尺寸是【一般ios都超过3000，宽度】3264x2448，于是，你就这样渲染画布：

  mpImg.render(resCanvas2, { maxWidth: 3264, maxHeight: 2448});

然后你会看到，无论如何都没办法画到画布上面去。诶玛，做个码农真的很麻烦，这种坑爹的bug又遇到了，简直要怀疑人生了。
【结论】
经过对maxwidth，maxheight的不同取值，可以确认，megapix-image这个插件支持的最大宽度最大高度是有限度的，超过该限度就会没办法正常渲染到画布，我的建议是2500宽度，2500高度，因为我采用2500及以下的

码农下的天桥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
megapix-image.js使用的一个坑-ios图片裁剪之画布绘制大图片

【前言】假如小伙伴尝试过在ios上做图片裁剪然后必然会遇到，ios上面的拍照的图片放到canvas上面没办法正常显示出来的问题，大家在搜索的时候必然会知道ios-imagefile-megapixel 这个项目。【使用方式】大家看到例子是这样子的： html内容<!DOCTYPE html><html> <head> <title>megapix-image.js te
复制链接

扫一扫