zoukankan      html  css  js  c++  java
  • H5移动端图片裁剪(base64)

    在移动端开发的过程中,或许会遇到对图片裁剪的问题。当然遇到问题问题,不管你想什么方法都是要进行解决的,哪怕是丑点,难看点,都得去解决掉。

    图片裁剪的jquery插件有很多,我也测试过很多,不过大多数都是支持pc端的图片裁剪,而支持移动端图片裁剪的少,很流畅的可能就会更少了。

    作为一个新手,我尝试了很多种解决方法,在初始的时候尝试自己写一个jquery插件支持触屏事件等,写出来了,但是觉得都不好意思拿出手,更别说拿出来商用了。

    又尝试找了一些插件,一个个试。最后综合评价,感觉还不错的jquery插件:cropper这个jquery创建。

    看了一下感觉还是挺简单的。

    下面就是我使用过程的一些代码,希望能对大家有所帮助。

    插件导入:

    <link rel="stylesheet" href="../../../css/delimg/cropper.css"/>
    <script src="../../../js/libs/jquery.min.js"></script>
    <script src="../../../js/delimg/cropper.js"></script>

    必要的一点html代码:

    <div class="img-container">
        <img src="" alt="">
    </div>

      注意:一般情况下,图片会动态生成,所以当前的src值,为空。如果你是静态图片进行图片截取,那就更简单了。看下面代码就懂了。

    插件的使用(很简单):

    var $image = $('.img-container > img');
         
    $image.attr("src", imgurl);    
    
    $image.on("load", function() {        // 等待图片加载成功后,才进行图片的裁剪功能
        $image.cropper({
            aspectRatio: 1 / 1  // 1:1的比例进行裁剪,可以是任意比例,自己调整
        });
    })        

    现在只是做了一个框架,最主要的是下面的代码,获取到图片的数据才是最主要的,所以我们需要利用到canvas的特异功能,将图片裁剪的部分转化为base64的字符串进行前后端数据的交互。

    然而,cropper并不会给你提供现成的base64字符串,但是他给你了一串的数据对象,供你自己任意发挥。

    点击某个按钮时,确定剪裁这一高亮的部分:

    $(selector).on("tap", function() {
        var src = $image.eq(0).attr("src");
        var canvasdata = $image.cropper("getCanvasData");
        var cropBoxData = $image.cropper('getCropBoxData');
        
        convertToData(src, canvasdata, cropBoxData, function(basechar) {
            // 回调后的函数处理        
        });
    })

    当然这也不是重点,重点是下面这个函数处理

    function convertToData(url, canvasdata, cropdata, callback) {
        var cropw = cropdata.width; // 剪切的宽
        var croph = cropdata.height; // 剪切的宽
        var imgw = canvasdata.width; // 图片缩放或则放大后的高
        var imgh = canvasdata.height; // 图片缩放或则放大后的高
        
        var poleft = canvasdata.left - cropdata.left; // canvas定位图片的左边位置
        var potop = canvasdata.top - cropdata.top; // canvas定位图片的上边位置
        
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext('2d');
        
        canvas.width = cropw;
        canvas.height = croph;
        
        var img = new Image();
        img.src = url;
        
        img.onload = function() {
            this.width = imgw;
            this.height = imgh;
                // 这里主要是懂得canvas与图片的裁剪之间的关系位置
            ctx.drawImage(this, poleft, potop, this.width, this.height);
            var base64 = canvas.toDataURL('image/jpg', 1);  // 这里的“1”是指的是处理图片的清晰度(0-1)之间,当然越小图片越模糊,处理后的图片大小也就越小
            callback && callback(base64)      // 回调base64字符串
        }
    }    


    好啦,就到这里了,该处理的东西都处理了,当然这里一个放大缩小的正向处理剪裁,如果需要对图片的旋转等一些列的操作的话,也是可以得,这里只是给大家展示一个简单的demo的实现,如果有用得上的,可以作为参考。

       

     
     
  • 相关阅读:
    PAT 甲级 1027 Colors in Mars
    PAT 甲级 1026 Table Tennis(模拟)
    PAT 甲级 1025 PAT Ranking
    PAT 甲级 1024 Palindromic Number
    PAT 甲级 1023 Have Fun with Numbers
    PAT 甲级 1021 Deepest Root (并查集,树的遍历)
    Java实现 蓝桥杯VIP 算法训练 无权最长链
    Java实现 蓝桥杯VIP 算法训练 无权最长链
    Java实现 蓝桥杯 算法提高 抽卡游戏
    Java实现 蓝桥杯 算法提高 抽卡游戏
  • 原文地址:https://www.cnblogs.com/leexq/p/4912913.html
Copyright © 2011-2022 走看看