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

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);
		

GraphicsMagick-libjpeg-libpng.zip