Hello forum,
Sorry I'm newbie here, I try to develop a color pick app using Intel XDK, it works well on emulator, but when i try to test on real device, it won't
do you guys have any suggestion for this problem?
Link Copied
nicolas r. wrote:
just check the link must be like folder/imagename.jpg or something like that. try to copy the code for more info
I've to put the image one folder with index page,
for the code please check below
<!DOCTYPE html>
<html>
<head>
<title>Choose Your Color</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<style>
@-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; } @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } @viewport { user-zoom: fixed ; min-zoom: 100% ; }
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<center>
<canvas id="myCanvas" width="256" height="256"></canvas>
<div id="r">R: <input type="text"></input></div>
<div id="g">G: <input type="text"></input></div>
<div id="b">B: <input type="text"></input></div>
<p id="teks">buat al</p>
<p id="dataAccel">1</p>
</center>
<script>
var red;
var green;
var blue;
// create an image object and get it’s source
var img = new Image();
img.src = 'color-picker.png'; //this is the image
// copy the image to the canvas
$(document).ready(function(){
$(img).load(function(){
canvas.drawImage(img,0,0);
});
$('#myCanvas').click(function(event){
// getting user coordinates
var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;
// getting image data and RGB values
var img_data = canvas.getImageData(x, y, 1, 1).data;
red = img_data[0];
green = img_data[1];
blue = img_data[2]; //var rgb = R + ',' + G + ',' + B;
$('#r input').val(red);
$('#g input').val(green);
$('#b input').val(blue);
});
});
</script>
</body>
</html>
