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/proflie
export 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);