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>
1 Correct answer
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

