GraphicsMagick + NodeJs + Croppic实现对图片的剪裁功能

来源：互联网发布：java多线程优点编辑：程序博客网时间：2024/05/10 14:53

GraphicsMagick + NodeJs + Croppic在MAC下实现对图片的剪裁功能

首先咱们先把需要使用的工具给准备好(链接我稍后建一个目录给大家地址)

GraphicsMagick-1.3.20.tar
libjpeg-6b.tar.gz
libpng-1.2.43.tar.gz
gm模块（这个都不会安装先学nodejs）

第一步：先安装GraphicsMagick

解压GraphicsMagick-1.3.20.tar到目录/usr/local/下

进入GraphicsMagick-1.3.20目录：

cd /usr/local/GraphicsMagick-1.3.21-----------------------------------./configure

执行完后检查GraphicsMagick是不是支持jpeg,png格式的图片

（如果jpeg-2000和png这两项最后是no看下面吧）

在jpeg-2000和png是yes的情况下：make install
这里写图片描述

配置环境变量：vi /etc/proflieexport GMAGICK_HOME="/usr/local/GraphicsMagick-1.3.21" export PATH="$GMAGICK_HOME/bin:$PATH" LD_LIBRARY_PATH=$GMAGICK_HOME/lib:$LD_LIBRARY_PATH export LD_LIBRARY_PATH source /etc/profile

安装 libjpeg，libpng

解压libjpeg-6b.tar.gz和libpng-1.2.43.tar.gz到目录/usr/local/下

进入libjpeg-6b目录：

./configure->>>>>>>>>>>>make install

进入libpng-1.2.43目录：

./configure->>>>>>>>>>>>make install

再进GraphicsMagick-1.3.20目录：

./configure    编译完后png和jpeg-2000的属性就变成yes了->>>>>>>>>>>>make install

第二步：编写服务端代码

nodejs部分代码

var fs = require('fs');var gm = require('gm');//图片剪裁所需要的一系列变量var imgUrl = args["imgUrl"].value;var imgInitW = args["imgInitW"].value;//你图片的原本高宽var imgInitH = args["imgInitH"].value;var imgW = args["imgW"].value;//插件缩放后的高端var imgH = args["imgH"].value;var imgY1 = args["imgY1"].value;//插件缩放后剪裁的X，Y轴的像素var imgX1 = args["imgX1"].value;var cropH = args["cropH"].value;//剪裁后的高宽var cropW = args["cropW"].value;var filePath = path+"source.png" //存放图片的路径//Croppic他给服务端的图片是转换成base64编码了,还得自己给转成图片存下来,转换方式自己去百度搜一下base64_decode(imgUrl, filePath ,function (err,fileUrl){    var gmFile = gm(fileUrl); //加载图片    //因为X和Y轴是插件缩放后的 所以需要去计算他实际X和Y轴的像素    var resultX = (imgInitW / imgW) * imgX1;     var resultY = (imgInitH / imgH) * imgY1;    gmFile.crop(imgInitW , imgInitH ,resultX, resultY)//剪裁    gmFile.resize(imgW-imgX1,imgH-imgY1);    gmFile.crop(cropW, cropH);//在剪裁你要的图片尺寸就OK了    gmFile.write(path+'resize.png', function (err) {        if(err) console.log(err.stack);    });;});

第三步：编写HTML代码

HTML部分代码

<link href="./css/croppic/croppic.css" rel="stylesheet" type="text/css" /><script type="text/javascript"  src="./js/croppic/croppic.min.js"></script><script>    $(function(){        var croppicContaineroutputOptions = {            cropUrl:"/resizeImage", //处理图片的接口            cropData:{},//需要带过去的参数            outputUrlId:'ImageUrl',//返回的地址给填入input文本框            modal:true,//蒙版 默认false            processInline:true,//如果你想在JavaScript处理初始FileUpload（有）而不是在服务器端（默认为false）            loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',            onAfterImgUpload: function(){ console.log('onAfterImgUpload') },            onImgDrag: function(){ console.log('onImgDrag') },            onImgZoom: function(){ console.log('onImgZoom') },            onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },            onAfterImgCrop:function(){ console.log('onAfterImgCrop') },            onError:function(errormessage){ console.log('onError:'+errormessage) }        }    })</script>        //忘记了一个东西,这是元素<div id="myImage"></div>        //里面放的就是div的id        var cropContaineroutput = new Croppic('myImage', croppicContaineroutputOptions);

GraphicsMagick-libjpeg-libpng.zip

0 0