Copy link to clipboard
Copied
I have a jquery script that picks a background color from an image using AJAX. I would like to save the variable, var rgba=e.rgba() to a MySQL databse. The individual who created the script said to use: $.post("color.php",{rgba:reba}); to save to a database with AJAX. How do I save the var rgba using coldfusion to do the CF side?
The script:
<script>
;(function($){
$.fn.canvasify = function(f){ // faster than dynamically converting a pixel at a time
return this.map(function(){
if (this.nodeName=="IMG"){
var canvas=$('<canvas>')
this.src = this.src // IE fix
$(this).one('load',function(){
canvas.attr({width:this.width,height:this.height})
canvas[0].getContext('2d').drawImage(this,0,0,this.width,this.height)
$(this).replaceWith(canvas)
})
return canvas[0]
}else{
return this
}
})
}
function Rgba(rgba){
this.rgba = rgba
this.toString = function(){ return "rgba("+Array.prototype.join.call(this.rgba,',')+")" }
}
$.Event.prototype.rgba=function(){
var x = this.offsetX || (this.pageX - $(this.target).offset().left),
y = this.offsetY || (this.pageY - $(this.target).offset().top),
nodeName = this.target.nodeName
if (nodeName==="CANVAS")
return new Rgba(this.target.getContext('2d').getImageData(x,y,1,1).data)
else if (nodeName==="IMG"){
var canvas=document.createElement("canvas")
canvas.width=1
canvas.height=1
canvas.getContext('2d').drawImage(this.target,x,y,1,1,0,0,1,1)
return new Rgba(canvas.getContext('2d').getImageData(0,0,1,1).data)
} else return null
}
})(jQuery)
$(function() {
$("figure").append("<p class="rgba">")
$('img').canvasify().click(demo)
// $('img').click(demo)
function demo(e){
var rgba=e.rgba(),
figure = $(this).parent()
figure.css('background-color',rgba).find("p").text(rgba)
}
});
</script>
<style>
p.rgba {
background:white;
color:black;
border:1px solid red;
min-height:20px;
}
</style>
Here is some pseudocode
AJAX
...
$data = {rgba:$rgba,var1=$var1,var2=$var2, etc.};
...
var ajaxResponse = $.ajax({
type: "POST",
url: "../../dir/Settings.cfc?method=saveBGColor,
contentType: "application/json; charset=utf-8",
data: JSON.stringify($data),
etc.
});
Settings.cfc
<cfcomponent>
<cffunction name="saveBGColor" access="remote">
<cfset requestBody = toString(getHttpRequestData().content)>
<!--- Double-check to make sure it's a JSON value. --->
<cfif isJSON(requestBody)>
...
Copy link to clipboard
Copied
Here is some pseudocode
AJAX
...
$data = {rgba:$rgba,var1=$var1,var2=$var2, etc.};
...
var ajaxResponse = $.ajax({
type: "POST",
url: "../../dir/Settings.cfc?method=saveBGColor,
contentType: "application/json; charset=utf-8",
data: JSON.stringify($data),
etc.
});
Settings.cfc
<cfcomponent>
<cffunction name="saveBGColor" access="remote">
<cfset requestBody = toString(getHttpRequestData().content)>
<!--- Double-check to make sure it's a JSON value. --->
<cfif isJSON(requestBody)>
<!--- Extract background colour from request body--->
<!--- Save background colour to database --->
</cfif>
</cffunction>
</cfcomponent>
Copy link to clipboard
Copied
Sorry it has taken so long to get back. Your suggestion worked perfectly. Thank you
Get ready! An upgraded Adobe Community experience is coming in January.
Learn more