论坛 › 知识问答 › javascript - Cordova 如何从相机旋转图片

菜鸟教程小白 发表于 2022-12-13 10:07:14

javascript - Cordova 如何从相机旋转图片

                                            <p><p>我用 Cordova 相机插件拍照
camera.getPicture() 接口(interface)</p>

<p>并获取 base64 图像我如何将此 base64 图像向右旋转 90 并获取新的 base64 字符串以保存
我的代码:</p>

<pre><code>Camera.getPicture(options).then(function(imageURI) {
      var img = new Image();
      img.src = &#34;data:image/png;base64,&#34; + imageURI;

      var rotate = false;

      if (img.width &gt; img.height) {
            rotate = true;
      }

         uploadImage(imageURI, activeIndex, rotate);

    }, function(err) {
      console.log(err);
      $ionicLoading.hide();
    });
</code></pre>

<p>图片旋转功能</p>

<pre><code> var rotateImage = function (base64ImageSrc) {
    var canvas = document.createElement(&#39;canvas&#39;);
    var img = new Image();
    img.src = base64ImageSrc;
    var context = canvas.getContext(&#39;2d&#39;);

    // translate context to center of canvas
    context.translate(canvas.width / 2, canvas.height / 2);

    // rotate 45 degrees clockwise
    context.rotate(Math.PI / 4);

    console.log(canvas.toDataURL());
    var ImageUrl = canvas.toDataURL();
    ImageUrl = ImageUrl.split(&#34;data:image/png;base64,&#34;);
    ImageUrl = ImageUrl;
    console.log(ImageUrl);
    return ImageUrl;
};
</code></pre></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>可以使用 Canvas 实现图像旋转，</p>

<pre><code>function rotateBase64Image() {
      var canvas = document.createElement(&#39;canvas&#39;);
      var ctx = canvas.getContext(&#34;2d&#34;);

      var image = new Image();
      image.src = base64data;
      image.onload = function() {
            ctx.translate(image.width, image.height);
            ctx.rotate(180 * Math.PI / 180);
            ctx.drawImage(image, 0, 0);
            window.eval(&#34;&#34;+callback+&#34;(&#39;&#34;+canvas.toDataURL()+&#34;&#39;)&#34;);
      };

}
</code></pre>

<p><strong>base64data</strong>:包含base64编码的照片图像[原始图像]的字符串</p>

<p><strong>canvas.toDataURL()</strong>:旋转图像</p>

<p> <a href="https://stackoverflow.com/questions/17040360/javascript-function-to-rotate-a-base-64-image-by-x-degrees-and-return-new-base64" rel="noreferrer noopener nofollow">Refer</a> </p></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - Cordova 如何从相机旋转图片，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/32242151/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/32242151/
                                                        </a>
                                                </p>
                                       

查看完整版本: javascript - Cordova 如何从相机旋转图片