Image processing offload to a thirdparty?

dev
1

Hi All,
I’ve found that there is a real void between those of us that use photoshop and those who just want to upload of photo they’ve taken with their camera or phone. These image tend to be on the larger side and CF image processing of large images sucks. Has anyone though of offloading the image process to some other service like tinypng?

I’ve had a play with the tinypng API and it appears to perform pretty well. You can also upload a source file and then make repeated requests against it for resized and cropped versions. It does has it’s limitations around cropping and it’s only for jpg and png files but otherwise it looks great for those 90% tasks. Failing, it could default back to using CF for the image.

I’ve had a quick look at image.cfc which looks like it might be easy to extend to use the api as long as it new that the source file had been uploaded and waiting to be called upon.

Does anyone know of some damning evidence against this as a possibility?

Here’s a quick poc i dropped into a fc7 admin page:

<cfsetting enablecfoutputonly="true">
<cfset tinypngkey = ToBase64('yourAPIKeyHere')>

<cfif structkeyExists(form,'theImage')>
  <cfdump var="#form#">
  <cffile action = "upload"  
        fileField = "theImage"  
        destination = "#application.path.defaultImagePath#"  
        accept="image/jpeg,image/pjpeg"
        nameConflict = "MakeUnique">
  <cfdump var="#cffile#">
  <cfimage source="#expandpath('/images/#cffile.serverfile#')#" name="inputimage" >
  <cfset bodydata = tobinary(tobase64(inputimage))>
  <cfhttp method="post" url="https://api.tinypng.com/shrink" result="result">
    <cfhttpparam type="header" name="Authorization" value="Basic #tinypngkey#" />
    <cfhttpparam type="header" name="Content-Type" value="image/*" />
    <cfhttpparam type="body"  value="#bodydata#" />
  </cfhttp>
  <cfdump var="#result#">
  <cfhttp method="post" url="#result.responseheader.location#" result="result2" getasbinary="yes">
    <cfhttpparam type="header" name="Authorization" value="Basic #tinypngkey#" />
    <cfhttpparam type="header" name="Content-Type" value="application/json" />
    <cfhttpparam type="body"  value='#serializeJSON({"resize":{"method":"fit","width":600,"height":600}})#' />
  </cfhttp>
  <cfdump var="#result2#">
  <cfimage action="write" source="#result2.filecontent#" destination="#application.path.defaultImagePath#/testsmall.jpg" overwrite="true">
  <cfoutput><img src="/images/testsmall.jpg?#randrange(0,999999)#"/></cfoutput>
</cfif>
<cfoutput>
  <form  enctype="multipart/form-data" method="post">
    <label>Select Image (jpg only for now)</label>
    <input type="file" name="theImage">
    <button type="submit">Go</button>
    <p>Image will end up being #application.path.defaultImagePath#/testsmall.jpg</p>
  </form>
</cfoutput>
<cfsetting enablecfoutputonly="no">
2

We have a plugin which offloads image processing to Cloudinary: http://cloudinary.com/

Once you sign up for a Cloudinary account you can basically just add the plugin to your project, configure the API key, and then all your future crops will be served using Cloudinary.

You can grab the plugin here and give it a try:

4 Likes
3

That is sweet, works a treat :slight_smile:

1 Like
4

Cool :slight_smile: The free Cloudinary plan is quite generous and should do for most small sites. We have several customers on the paid, higher tier plans and it has worked quite well for us for a couple of years now. That said, the paid plans are very good value considering the effort to build your own image processing and CDN capabilities.

1 Like
5

Finally added the Cloudinary Plugin to the plugin directory :slight_smile: